title: What's causing so much space in my div containers?
body: <p>I'm trying to create two divs with a heading that have a grey header that only have a small amount of padding. </p>
  
  <p>Here is my html</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-6"&gt;
              &lt;div class="small-grey-header"&gt;
                  &lt;p class="center-text"&gt;User Login&lt;/p&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div class="col-6"&gt;
              &lt;div class="small-grey-header"&gt;
                  &lt;p class="center-text"&gt;Help Links&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is my css</p>
  
  <pre><code>.center-text{
      text-align: center;
      display: block;
  }
  
  .small-grey-header{
      border-radius: 3px;
      background-color: lightgray;
      height: auto;
      padding-top: 1px;
      padding-bottom: .5px;
      margin-bottom: 5px;
  }
  </code></pre>
  
  <p>The problem is that they look way to big and I'm not sure why.</p>
  
  <p>Here is what I want<a href="https://i.stack.imgur.com/NkexK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NkexK.png" alt="Image1"></a></p>
  
  <p>And this is what im getting<a href="https://i.stack.imgur.com/JbR9p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JbR9p.png" alt="image3"></a></p>
  
  <p>Here is a the fiddle 
  <a href="https://jsfiddle.net/Ljsgtq0o/" rel="nofollow noreferrer">https://jsfiddle.net/Ljsgtq0o/</a></p>
  
  <p>I am using a grid system to set these side by side but I'm excluded it for simplicity. Even setting 1 pixel of padding on the divs is causing a huge amount of space. What am I doing wrong? Please note that I'm not concerned with the spacing between these two headings. I just want these headings to not be so large. They almost look like buttons. </p>