Other css box is moving when im writing to the one im using : <p>So when im trying to add a paragraph to my box, the other one moves.. Ive been looking to see if its something wrong with the margin or so, but not that i can see.
I have absolutely no idea how to fix it.
This is how it looks before i do something:
<a href="https://imgur.com/a/lZZq4" rel="nofollow noreferrer">https://imgur.com/a/lZZq4</a>
This is how it looks after i add some text or whatever to the box
<a href="https://imgur.com/a/FXkrf" rel="nofollow noreferrer">https://imgur.com/a/FXkrf</a></p>

<p>As you can see, the other box is moving, and the more i write, the further down its going.
Would appreciate some explanation here.</p>

<p>HTML CODE:</p>

<pre><code>    &lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Inlamningsuppgift 1&lt;/title&gt;
    &lt;link rel="stylesheet" href="css.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="wrapper"&gt;
    &lt;header&gt;
        &lt;h1&gt; Inlamningsuppgift 1 &lt;/h1&gt;
    &lt;/header&gt;
    &lt;nav id="firstnav"&gt;
        &lt;a href="start.html" id="start"&gt; Start &lt;/a&gt;
        &lt;a href="filmer.html" id="filmer"&gt; Filmer &lt;/a&gt;
        &lt;a href="bildspel.html" id="bildspel"&gt; Bildspel &lt;/a&gt;
        &lt;select&gt;
          &lt;option value="Blue"&gt; Blå &lt;/option&gt;
          &lt;option value="Red"&gt; Röd &lt;/option&gt;
          &lt;option value="Violet"&gt; Lila &lt;/option&gt;
        &lt;/select&gt;
    &lt;/nav&gt;
  &lt;section&gt;
    &lt;h3&gt; Välkommen till min webbplats! &lt;/h3&gt;

    &lt;article id="presentation"&gt;
      &lt;h4&gt; Vem är skaparen av sidan? &lt;/h4&gt;
    &lt;/article&gt;

    &lt;article id="anledning"&gt;
      &lt;h4&gt; Anledning till att jag gör denna sidan &lt;/h4&gt;
      &lt;p&gt; hej
    &lt;/article&gt;

    &lt;article id="utmaningar"&gt;
      &lt;h4&gt; Tre saker jag tyckt varit utmanande med uppgiften &lt;/h4&gt;
      &lt;ul&gt;
        &lt;li&gt; Sak 1 &lt;/li&gt;
        &lt;li&gt; Sak 2 &lt;/li&gt;
        &lt;li&gt; Sak 3 &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/article&gt;
  &lt;/section&gt;
  &lt;footer&gt;

  &lt;/footer&gt;
  &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>CSS CODE:</p>

<pre><code>    #wrapper{
    margin-left:auto;
    margin-right:auto;
    width:970px;
}
header{
  background-color: grey;
  text-align: center;
  padding: 10px;
}
#firstnav{
  background-color: black;
  padding: 10px;

}
#start{
  margin-right: 250px;
  text-decoration: none;
  color: white;
}
#filmer{
  margin-right: 150px;
  text-decoration: none;
  color: white;
}
#bildspel{
  text-decoration: none;
  color: white;
}
nav select{
  float: right;
  width:250px;
}
section{
  background-color: grey;
  padding-top: 1px;
  padding-bottom: 40px;
}
section h3{
  text-align: center;
  padding-bottom: 12px;
}
#presentation{
  width: 350px;
  height: 100px;
  background-color: white;
  display: inline-block;
  margin-left: 75px;
  padding-left: 20px;
  clear: both;
}
#presentation img{

  width: 40px;
  height: 40px;
}
#anledning{
  display: inline-block;
  height: 100px;
  background-color: white;
  width: 350px;
  margin-left: 70px;
  padding-left: 20px;
  clear: both;

}
#utmaningar{
  background-color: white;
  width: 850px;
  margin-left: 70px;
}
#utmaningar &gt; h4{
  padding-left: 10px;
  padding-top: 8px;
}
footer{
  text-align: center;
  background-color: black;
  color: white;
  padding: 10px;
}
</code></pre>

<p>Its the id with #presentation and #anledning which are moving.</p>
