title: The place of the div isnt correct
body: <p>I am making a website, and I use the common tag . But the place of the div is changed when I change the length. Why does it occur?</p>
  
  <p>I have tried to change the length of the #body several times and i found that when it is 607px, it is normal, but when it is 608px, it appears under the image. </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>* {
    margin: 0px;
    padding: 0px;
  }
  
  #header {
    width: 100%;
    height: 150px;
  }
  
  #logo {
    width: 300px;
    height: 150px;
    float: left;
  }
  
  #heading {
    width: 1140px;
    height: 150px;
    float: right;
  }
  
  #welcome {
    width: 1140px;
    height: 75px;
  }
  
  #links {
    width: 1140px;
    height: 75px;
  }
  
  #logo&gt;a {
    text-align: center;
    line-height: 150px;
    text-decoration: none;
  }
  
  #welcome&gt;h1 {
    text-align: center;
    line-height: 75px;
  }
  
  #welcome&gt;h1&gt;a {
    text-decoration: none;
  }
  
  #links&gt;ul {
    width: 1140px;
    height: 75px;
  }
  
  #links&gt;ul&gt;li {
    width: 228px;
    height: 75px;
    list-style: none;
    float: left;
  }
  
  #links&gt;ul&gt;li&gt;a {
    display: block;
    line-height: 75px;
    text-align: center;
    font-size: 35px;
    text-decoration: none;
  }
  
  #links&gt;ul&gt;li&gt;a:hover {
    background-color: orange;
  }
  
  #body {
    width: 100%;
    height: 608px;
    background-color: rgb(27, 27, 31);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="header"&gt;
    &lt;div id="logo"&gt;
      &lt;a href="homepage.html"&gt;&lt;img src="image_here.png"&gt;&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div id="heading"&gt;
      &lt;div id="welcome"&gt;
        &lt;h1&gt;Welcome to here!&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;div id="links"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href=""&gt;Link 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Link 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Link 3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Link 4&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Link 5&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="body"&gt;
  
  &lt;/div&gt;
  
  &lt;div id="footer"&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I expect it should be like <a href="https://imgur.com/1Ixvwd6" rel="nofollow noreferrer">https://imgur.com/1Ixvwd6</a>. 
  But the result is <a href="https://imgur.com/SqC6zDV" rel="nofollow noreferrer">https://imgur.com/SqC6zDV</a>.</p>