Whenever I try to add a paragraph to my box, the other one shifts. I've checked for any issues with margins or spacing, but nothing seems off from what I can tell. I have no clue how to resolve this. Here's how it appears before making any changes: https://i.sstatic.net/n5SFj.jpg And here's how it looks after adding text or any content to the box https://i.sstatic.net/y0Zyx.jpg
As you can see, the adjacent box is shifting down as I type more content. Any insights into what might be causing this would be greatly appreciated.
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inlamningsuppgift 1</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="wrapper">
<header>
<h1> Inlamningsuppgift 1 </h1>
</header>
<nav id="firstnav">
<a href="start.html" id="start"> Start </a>
<a href="filmer.html" id="filmer"> Filmer </a>
<a href="bildspel.html" id="bildspel"> Bildspel </a>
<select>
<option value="Blue"> Blå </option>
<option value="Red"> Röd </option>
<option value="Violet"> Lila </option>
</select>
</nav>
<section>
<h3> Välkommen till min webbplats! </h3>
<article id="presentation">
<h4> Vem är skaparen av sidan? </h4>
</article>
<article id="anledning">
<h4> Anledning till att jag gör denna sidan </h4>
<p> hej
</article>
<article id="utmaningar">
<h4> Tre saker jag tyckt varit utmanande med uppgiften </h4>
<ul>
<li> Sak 1 </li>
<li> Sak 2 </li>
<li> Sak 3 </li>
</ul>
</article>
</section>
<footer>
</footer>
</div>
</body>
</html>
CSS 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 > h4{
padding-left: 10px;
padding-top: 8px;
}
footer{
text-align: center;
background-color: black;
color: white;
padding: 10px;
}
The elements with IDs #presentation and #anledning are the ones moving.