title: Adding text elements to div with a background-image is causing white space to appear around the image
body: <p>I have the following CSS:</p>
  <pre><code>body{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  #section-one{
    background-image: url('https://i.picsum.photos/id/738/200/300.jpg?hmac=x-GpfBAQrKyKnrXqne7UJ3rdVnkGD7e-uRhpCcZWb9I'); /*random image*/
    background-repeat:no-repeat;
    background-position: center center;
    background-size: 100%;
    height: 60vh;
  }
  </code></pre>
  <p>If I apply that to an empty div as such:</p>
  <pre><code>&lt;div id='section-one'&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The background image would take effect and there would be no white space around it(<a href="https://codepen.io/ob98/pen/JjXEMPK" rel="nofollow noreferrer">https://codepen.io/ob98/pen/JjXEMPK</a>). However, when I try to add text to <code>#section-one</code>:</p>
  <pre><code>&lt;div id='section-one'&gt;
       &lt;ul&gt;
         &lt;li&gt;Item One&lt;/li&gt;
         &lt;li&gt;Item Two&lt;/li&gt;
         &lt;li&gt;Item Three&lt;/li&gt;
       &lt;/ul&gt;
       &lt;div id=&quot;tagline&quot;&gt;
         &lt;h1&gt;Text&lt;/h1&gt;
         &lt;h1&gt;Text&lt;/h1&gt;
       &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  <p>White space appears above and to the right of the background image. This can be seen here: <a href="https://codepen.io/ob98/pen/MWyJOMd" rel="nofollow noreferrer">https://codepen.io/ob98/pen/MWyJOMd</a></p>
  <p>If anyone knows what is causing this and how to fix it would be greatly appreciated.</p>