I have two files, one in .html format and the other in .css format. Here is a snippet of their content:
#left,
#right {
display: inline-block;
}
#left {
width: 15%;
height: 550px;
margin-bottom: 100px;
margin-left: 10px;
border: 1px solid black;
}
#right {
width: 80%;
margin-left: 25px;
}
#header {
width: 100%;
height: 100px;
border: 1px solid black;
}
#content {
width: 100%;
height: 500px;
border: 1px solid black;
margin-top: 10px;
}
#footer {
width: 100%;
height: 100px;
border: 1px solid black;
margin-top: 10px;
}
#menu {
width: 100%;
height: 50%;
background-color: red;
}<div id="left">
</div>
<div id="right">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>Whenever I add an <h1> element inside any of these sections - #left, #header, #footer, or #content, their position shifts downwards for some reason. Can someone please explain this phenomenon to me? Thank you.