I build wedsite by html and css but when i make in css the media to fix the website in mobile screen i interface problem that the section below the header didn’t fit the header .
@media (max-width:1023px) {
header {
padding: 12px 20px;
margin-right: 20px;
}
header .logo {
font-size: 1em;
}
.navigation a {
padding-left: 10px;
font-size: 0.8em;
font-weight: 600;
}
section {
padding: 80px 20px;
}
.main h2 {
font-size: 1em;
}
.main-content h2 span {
font-size: 2em;
}
.main h3 {
font-size: 1.6em;
}
{<body>
<header>
<a href="#" class="logo"> Ahmed Faesl </a>
<nav class="navigation">
<a href="#services">Cervices</a>
<a href="#project">Project</a>
<a href="#contact">Contact</a>
</nav>
</header>
<section class="main">
<div>
<h2>Hello,I'm Ahmed <br><span> Web Programer</span></h2>
<h3> I bulid wedsite for free</h3>
<a href="#" class="main-btn">view my work</a>
<div class="social-icons">
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-facebook"></i></a>
<a href="#"><i class="fa-brands fa-twitter"></i></a>
<a href="#"></i>
</a>
</div>
How I can fix it and fit all of this ?