title: How to get rid of extra white space within a wrapper
body: <p><img src="https://i.imgur.com/9HHTO.jpg" alt="Example"></p>
  
  <p>As you can see on the example picture, there is some type of white space above the "news" header (padding? margin?) I have tried messing around with padding-top, margin-top but nothing I did would get rid of the white space. Thanks!</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="news_wrapper"&gt;
      &lt;div id="newsheader"&gt;
          &lt;p&gt;News&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="news"&gt;
          &lt;p&gt;"News Post 1"&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="news"&gt;
          &lt;p&gt;"News Post 2"&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="news"&gt;
          &lt;p&gt;"News Post 3"&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="news"&gt;
          &lt;p&gt;"News Post 4"&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>#news_wrapper {
  border: 1px solid black;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  width: 650px;
  height: auto;
  margin: 6px;
  }
  
  #newsheader {
  background-color: Black;
  color: white;
  width: auto;
  margin: 0px;
  height: 30px;
  text-align: center;
  font: 'Helvetica', sans-serif;
  text-transform: bold;
  }
  
  .news {
  display: block;
  margin: auto;
  text-align: center;
  border: 1px solid black;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  margin: 4px;
  }
  </code></pre>