html – How i match the part with header in css when the consumer open the net by cell

I construct wedsite by html and css however when i make in css the media to repair the web site in cell display screen i interface downside that the part beneath the header didn’t match the header .

Css code

 @media (max-width:1023px){
   header{
    padding:12px 20px;
    margin-right:20px;
   }
   header .emblem{
    font-size:1em;
   }


  .navigation a{
    padding-left:10px;
    font-size:0.8em;
    font-weight: 600;
  }

  part{
    padding:80px 20px;
  }
  .fundamental h2{
    font-size:1em;
  }
  .main-content h2 span {
   font-size:2em;
 }

  .fundamental h3{
   font-size:1.6em;
  }
 {

Html code

<physique>

 <header>
  <a href="#" class="emblem"> Ahmed Faesl </a>
  <nav class="navigation">
    <a href="#companies">Cervices</a>
    <a href="#challenge">Venture</a>
    <a href="#contact">Contact</a>
  </nav>
 </header> 


 <part class="fundamental">
   <div>
    <h2>Howdy,I am Ahmed <br><span> Net Programer</span></h2>
    <h3> I bulid wedsite at no cost</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>

that is the wed within the cell

How i can repair it and match all of this ?