title: HTML CSS Print page removing whitespace at top and bottom
body: <p>I'm trying to print an HTML page and I'm having a hard time getting rid of extra white space at the top and bottom of the page.</p>
  
  <p>Here's what the print preview looks like (arrows pointing to the space):</p>
  
  <p><a href="https://i.stack.imgur.com/HUmvX.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HUmvX.jpg" alt="enter image description here"></a></p>
  
  <p>and my CSS:</p>
  
  <pre><code>@@media print {
          body {
              margin: 5px;
          }
  
          .body.menubar-top {
              padding-top: 0px;
          }
  
          .no-print {
              display: none;
          }
  
          #section-to-print, #section-to-print * {
              visibility: visible;
              margin-top: 0px;
              padding-top: 0px;
          }
  
          #section-to-print {
              /*position: absolute;*/
              /*left: 0;
              top: 0;*/
          }
      }
  </code></pre>
  
  <p>and the page code:</p>
  
  <pre><code>    &lt;div class="row" id="section-to-print" style="vertical-align:top"&gt;
  
      &lt;div class="col-md" id="projectDetails"&gt;
  
          &lt;div class="col-md-12"&gt;
              &lt;h3 class="headerTitle"&gt;
                  Main Title
              &lt;/h3&gt;
          &lt;/div&gt;
  
          &lt;div class="col-md-12"&gt;
              &lt;h4 class="headerTitle"&gt;
                  Sub title
              &lt;/h4&gt;
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="col-md-12"&gt;
                  &lt;h5&gt;
                      Project Details
                  &lt;/h5&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  etc......
  </code></pre>
  
  <p>I haven't created a print page in a while but I'm sure this should be simple.</p>