title: How can I reduce the amount of "whitespace" above my h2 (HTML/CSS)?
body: <p>I've got a piece of a page that looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/Svrzh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Svrzh.png" alt="enter image description here"></a></p>
  
  <p>It's coming along, but I want less "dead space" or whitespace between the top border and the "Top 10 Items Purchased" h2 element. </p>
  
  <p>This is the pertinent CSS and HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  .contents {
    height: 50%;
    width: 100%;
  }
  .topleft {
    margin-top: 16px;
    margin-left: 16px;
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid black;
  }
  .sectiontext {
    font-size: 1.5em;
    font-weight: bold;
    font-family: Candara, Calibri, Cambria, serif;
    color: green;
  }
  .bottommarginbreathingroom {
    margin-bottom: 2px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
  
  &lt;body&gt;
    &lt;div class="contents"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-6"&gt;
          &lt;div class="topleft"&gt;
            &lt;h2 class="sectiontext"&gt;Top 10 Items Purchased&lt;/h2&gt;
            &lt;div&gt;
              &lt;input type="date" class="bottommarginbreathingroom" id="daterangefrom2" name="daterangefrom2"&gt;
              &lt;/input&gt;
              &lt;label&gt;to&lt;/label&gt;
              &lt;input type="date" class="bottommarginbreathingroom" id="daterangeto2" name="daterangeto2"&gt;
              &lt;/input&gt;
            &lt;/div&gt;
  
            &lt;table&gt;
              &lt;tr&gt;
                &lt;th&gt;Item Code&lt;/th&gt;
                &lt;th&gt;Description&lt;/th&gt;
                &lt;th&gt;Qty&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;100250&lt;/td&gt;
                &lt;td&gt;Artichokes Green Globe 18 Size&lt;/td&gt;
                &lt;td&gt;9084&lt;/td&gt;
              &lt;/tr&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried adding:</p>
  
  <pre><code>padding-top: -12px;
  </code></pre>
  
  <p>...to the sectiontext class, and then the topleft class, and that was not effective.</p>
  
  <p>What must I do to reduce the space between the top border and first line of text (h2)?</p>