Why does my main context go over the header? - html

Question

When I put in my header (i have already put in my context) it just puts the header underneath what the context is so you can't see the header.
I have already tried changing the padding and the other sizes but none work
https://jsfiddle.net/L30trdfn/1/This is the full code of my website
What should happen is that the description and avatar ECT should go under the navbar and fit

Answer 1

Change your CSS code Like this
.split {
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.col {
width:50%;
height:50%;
flex: 0 0 50%;
max-width: 50%;
padding-top: 50px;
overflow-x: hidden;
}
.black{background-color: #f5f5f5;}
.red{background-color: #f00;}
.centered {
text-align: center;
}
Corresponding html like this
<div class="split">
<div class="col black">
<div class="centered">
<img src="avatar1.png" alt="Avatar woman">
<h2>Fortnitewinner21</h2>
<p>Co-Owner of FSX/XP11 and is the Head Website devolper</p>
</div>
</div>
<div class="col red">
<div class="centered">
<img src="avatar2.png" alt="Avatar man">
<h2>MasterPilot</h2>
<p>Owner of FSX/XP11, He plays a big part in making the server run smoothley</p>
</div>
</div>
</div>
Change the img src according to your sources
{
font-family: Arial;
color: white;
}
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #9099A2;
}
/* Header/Blog Title */
.header {
padding: 30px;
text-align: center;
color: white;
background: #6D7993;
}
.header h1 {
font-size: 50px;
}
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}
/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: indianred;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* Right column */
.rightcolumn {
float: left;
width: 25%;
background-color: #9099A2;
padding-left: 20px;
}
/* Fake image */
.fakeimg {
width: 100%;
}
/* Add a card effect for articles */
.card {
background-color: #D5D5D5;
padding: 20px;
margin-top: 20px;
box-shadow: 10px 10px 5px grey;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.split {
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.col {
width:50%;
height:50%;
flex: 0 0 50%;
max-width: 50%;
padding-top: 50px;
overflow-x: hidden;
}
.black{background-color: #f5f5f5;}
.red{background-color: #f00;}
.centered {
text-align: center;
}
.centered img {
width: 150px;
border-radius: 50%;
}
<div class="header">
<h1>Welcome To FSX/XP11</h1>
<p>The Home of Flight Sim</p>
</div>
<div class="navbar">
Home
Gallery
<div class="dropdown">
<button class="dropbtn">Flight Planner
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Flight Strips
Login
Register
</div>
</div>
</div>
<div class="split">
<div class="col black">
<div class="centered">
<img src="https://mail.google.com/mail/u/0?ui=2&ik=61315df9c6&attid=0.1&permmsgid=msg-f:1648390313577802256&th=16e04241b3ffea10&view=fimg&sz=s0-l75-ft&attbid=ANGjdJ8KWZCU9VW1k7NdYrm1ZoOE30R5M9Aoeokzr0KSjzE53wP1UvEZhJkACRl5RpKmGQs8W9TlWHfQME7CgcCB3TKlJ8lpdJYRU7dwfDfGHHHJvD455hCYQa4OAos&disp=emb&realattid=ii_k26gkdq90" alt="Avatar woman">
<h2>Fortnitewinner21</h2>
<p>Co-Owner of FSX/XP11 and is the Head Website devolper</p>
</div>
</div>
<div class="col red">
<div class="centered">
<img src="img_avatar.png" alt="Avatar man">
<h2>MasterPilot</h2>
<p>Owner of FSX/XP11, He plays a big part in making the server run smoothley</p>
</div>
</div>
</div>

Answer 2

Use the following CSS : \
you had given fixed position in .split and also used absolute position in .centered. I hope you got your answer
.split {
height: 50%;
width: 50%;
overflow-x: hidden;
padding-top: 50px;
}
.centered {
text-align: center;
}