When I have multiple divs grouped together inside another div, the placement of my h1 tag shifts downwards. How can I prevent this from happening and ensure that the text is added without any unwanted shifting? This issue only occurs when there are two or more divs next to each other within a parent div. Any guidance on how to fix this would be greatly appreciated. Check out the current layout here, and an example of how I want it to look like with the text included here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="positioningTrial.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="seperate">
<div class="inside">
<h1>hello</h1>
</div>
<div class="inside">
</div>
</div>
<!-- ------------------------------------------------------------------------------------------- -->
<div id="main-cont">
<div class="row">
<div class="left">
<h1>hello</h1>
</div>
<div class="middle"></div>
<div class="right"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</div>
</body>
</html>
h1,
p {
padding: 0;
margin: 0;
}
#seperate {
border: 1px solid red;
height: 10vw;
width: 400px;
text-align: center;
margin-bottom: 5px;
}
.inside {
display: inline-block;
border: 1px solid red;
height: 100%;
width: 40%;
}
/* ---------------------------------------------- */
#main-cont {
width: 100vw;
height: 100vh;
border: 3px solid blue;
text-align: center;
}
.row {
width: 100%;
height: 20%;
border: 3px solid #ff0000;
}
.left,
.middle,
.right {
display: inline-block;
width: 20%;
height: 100%;
border: 2px solid black;
}
.left {
}
.middle {
width: 40%;
}
.right {
}
/* --------------------------------------------- */
[1]: https://i.stack.imgur.com/nGHtm.jpg