title: Full screen bootstrap webpage only taking up half of display
body: <p>I'm trying to create a very basic version of a CMS, and I'm using a page that gives an html template and allows the user to create their own text and image uploads to show the screen they create on a display elsewhere.</p>
  
  <p>The template works and it stores what it should but my problem is this:</p>
  
  <p>When I send the template to it's own webpage to view on another screen (computer, tv, phone, ,etc.) The entire page is only showing on the left half of the screen, perfectly half of the screen no matter what.</p>
  
  <p>I've tried removing all external CSS and scripts just to be safe but it makes no difference. The only difference is that from the templating page I"m removing my global navigation menu which wraps everything on it's pages, but I just want this webpage (using bootstrap 4 grid) to fill the page</p>
  
  <p>Picture of it in templating:
  <a href="https://i.stack.imgur.com/I1IFr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I1IFr.png" alt="enter image description here"></a></p>
  
  <p>and live:
  <a href="https://i.stack.imgur.com/CkpIg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CkpIg.png" alt="enter image description here"></a></p>
  
  <p>I just want the body of the page to fill the entire viewport of whatever device it is, but it's just filling half which is strange. Is it painfully obvoius what I'm doing wrong here?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Template One&lt;/title&gt;
  
    &lt;style type="text/css"&gt;
      html,
      body {
        height: 100vh;
        width: 100vh;
      }
  
      .my-container {
        display: flex;
        flex-direction: column;
        height: 100vh;
        width:100vh;
      }
  
      .my-container&gt;.top [class^="col-"],
      .my-container&gt;.bottom [class^="col-"] {
        background-color: #929292  ;
        color: white;
        text-align: center;
      }
  
      .my-container&gt;.middle {
        flex-grow: 1;
        padding:30px;
        background-image: url('images/bg6.jpg');
        background-size: cover;
      }
  
      .my-container&gt;.middle&gt;* {
      }
  
      #clock{
          /*background-color:#333;*/
          font-family: sans-serif;
          font-size:40px;
          text-shadow:0px 0px 1px #fff;
          color:#fff;
      }
      #clock span {
          color:#fff;
          font-size:40px;
          position:relative;
  
      }
      #date {
        margin-top: -10px;
          letter-spacing:3px;
          font-size:20px;
          font-family:arial,sans-serif;
          color:#fff;
      }
    &lt;/style&gt;
  
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" crossorigin="anonymous"&gt;
    &lt;link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" /&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  
    &lt;script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body onload="startTime()"&gt;
  
  &lt;!-- Container --&gt;
  &lt;div class="container-fluid my-container"&gt;
    &lt;!-- Top Row --&gt;
    &lt;div class="row top"&gt;
      &lt;div class="col-lg-12"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-lg-3"&gt;
            &lt;img style="height: 100px;width: 250px;" src="/images/img.svg"&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-6"&gt;
            &lt;a class="weatherwidget-io" href="https://forecast7.com/en/35d16n84d88/?unit=us" data-label_1="" data-label_2="WEATHER" data-days="3" data-theme="original" data-basecolor="" &gt; WEATHER&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-3 align-self-center"&gt;
            &lt;div id="clockdate"&gt;
              &lt;div class="clockdate-wrapper"&gt;
                &lt;div id="clock"&gt;&lt;/div&gt;
                &lt;div id="date"&gt;&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;      
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- Middle Row --&gt;
    &lt;div class="row middle"&gt;
      &lt;div class="col-lg-6" &gt;
        &lt;div style="background-color: white; height: 100%;"&gt;&lt;p&gt;Left&lt;/p&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-6"  &gt;
        &lt;div style="background-color: white; height: 100%"&gt;&lt;p&gt;Right&lt;/p&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- Bottom row --&gt;
    &lt;div class="row bottom"&gt;
      &lt;div class="col-lg-12"&gt;
        &lt;div class="marquee"&gt;&lt;h2&gt;This is a test&lt;/h2&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- end container --&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>