Почему мой контент смещается влево после того, как я нажимаю ссылку на раздел на панели навигации?

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,600;1,100;1,200;1,300;1,500&display=swap');

  /* add this part here */
  * {
    box-sizing: border-box;
  }

  html{
    overflow: scroll;
   
    
 }

  body{
    font-family: 'Poppins', sans-serif;
overflow-x: hidden;
    margin: auto;
    padding: 0;
    scroll-behavior: smooth;
  }



.header{
  width: 100%;
    height: 90vh;
    background-image: linear-gradient(rgba(1, 20, 106, 0.7),rgba(0, 0, 0, 0.7)), url(t-k-9AxFJaNySB8-unsplash.jpg);
    background-size: cover;
    background-position: center;
    padding: 10px 8%;
    position: relative;
    display: grid;
    justify-content: center;
    align-items: center;
}


nav {
  position: relative; 
  padding: 10px;
  display: flex; /* use flexbox to align elements */
  align-items: center; /* center elements vertically */
  justify-content: center;
  background-color: #ffffff; /* set background color of navbar */
  height: 7%; /* set height of navbar to 100% */
  width: 100%; /* set width of navbar to 100% */
  position: fixed; /* position navbar at top of page */
  top: 0; /* set top position to 0 */
  left: 0; /* set left position to 0 */
  z-index: 999;
}


nav img {
  position: absolute; 
  top: 0; 
  left: 0; 
  height: 95%; /* set height of image */
  margin-right: 10px; /* add some spacing between image and links/buttons */
  margin-left: 20px;
  margin-right: none;
}

nav ul  {
  display: flex;
  justify-content: center;
  list-style: none;
  align-items: center;
  gap: 4rem;
  text-decoration: none;
  text-decoration-line: none;
}

nav a{
  text-decoration: none;
  font-size: 20px;
  margin-top: 70px;
  font-weight: 600;
  color: black;
  transition: color 0.3s ease; /* add transition to color change */
}



nav a:hover{
  
  color: #3e059a;

}

nav button{
  border: 0;
  outline: 0;
  background: #2c066a;
  color: white;
  padding: 7px 20px;
  font-size: 15px;
  border-radius: 4px;
  margin-left: 10px;
  cursor: pointer;
  font-weight: 700;
  height: 35px;
}


.header-content h1{
  display: flex;
  justify-content: baseline;
  align-items: center;
  font-size: 90px;
  margin-top: 260px;
  color: white;
 
}

.header-content h2{
  display: flex;
  justify-content: baseline;
  align-items: center;
  color: white;
}




.wrapper{
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #ffffff;
  margin-top: 10%;
  height: 50vh;
  /* margin-right: 20%; remove this property */
  box-shadow: inset;
 

}

.wrapper h1{
  font-size: 3em;
  margin: 25px 0;
  text-align: center;
  font-weight: 00;
  color: #3e059a;
  
}

.content-box{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 1000px;
  margin-top: 30px;


}


.card{
  min-height: 250px;
  width: 270px;
  padding: 10px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #ffffff;
  margin: 10px 4px;
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2);
  transition: color 0.6s ease; /* add transition to color change */
}

}

.card i{
  margin: 20px;
  color: #2c066a;
}



.card:hover {
  background-color: #2c066a;
  color: #ffffff;
}


.card h2{
  margin-bottom: 12px;
  font-weight: 400;
  text-align: center;
}

card p{
  text-align: center;
}

              
@media(max-width: 991px)
{


.wrapper{
  padding: 25px;
}

.wrapper h1 {
  font-size: 2.5em;
  font-weight: 500;
}


.content-box{
  flex-direction: column;
  width: 100%;
}


.card{
  min-width: 300px;
  margin: 10px auto;
}

}

/*ABOUT SECTION*/
.about-section {
  background-color: #f9f9f9;
  padding: 50px 0;
  /* margin-right: 17%; remove this property */
  margin-top: 10%;

  align-items: center;
  justify-content: center;
 
}

.about-section .container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
 
}




.about-section h2 {
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40px;
  color: #2c066a;
  font-family: 'Poppins', sans-serif
}

.about-section p {
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 20px;
}


/*PROJECT COUNTER*/
.text-center {
  text-align: center;



}

.project-counter-wrap ul{
list-style-type: none;
display: flex;
align-items: center;
justify-content: center;
/* margin-right: 10%; remove this property */
}

.project-counter-wrap ul li{
  width: 33.3%;
height: 100%;
padding: 30px;
transition: 0.2s linear;
font-size: x-large;
margin-right: 10%;
text-align: center;
}

.project-counter-wrap ul li:hover {
  background-color: #2c066a;
  color: #f9f9f9;
}










/*Testimonials*/

.testimonials {

  background: #f1f1f1;
  color: #434343;
  text-align: center;
  /* margin-right: 15%; remove this property */
}

.inner {
  margin: auto;
  max-width: 1200px;
  overflow: hidden;
  padding: 0 20px;
}


.border{
  width: 160px;
  height: 5px;
  background: #2c066a;
  margin: 26px auto;

}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.col {
  flex: 33.33%;
  max-width: 33.33%;
  box-sizing: border-box;
  padding: 15px;
}

.testimonial {
  background: #ffffff;
  padding: 30px;
 
}


.name {
  text-transform: uppercase;
  font-size: 20px;
  margin: 20px 0;

}


.stars {
  color: #b1ef08;
}


@media screen and (max-width:960px) {
  .col {
    flex: 100%;
    max-width: 80%;
  }
}

/*FOOTER*/

footer {
  background-color: #ffffff;
  width: 100%;
  align-items: baseline;
  
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.contact-info, .hours {
  list-style: none;
  margin-right: 20%;
}

.directions {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-top: 20px;
}

.btn {
  
  color: #ffffff;
  background-color: #2c066a;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
 
  
}

<!DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = "UTF-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>Landing Page</title>
    <link rel = "stylesheet" href = "styles.css">
    <link rel = "preconnect" href = "https://fonts.googleapis.com">
    <link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin>
    <link href = "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,600;1,100;1,200;1,300;1,500&display=swap" rel = "stylesheet">
    <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel = "stylesheet" href = "path/to/bootstrap/css/bootstrap.min.css">
    <link rel = "stylesheet" href = "path/to/font-awesome/css/font-awesome.min.css">
  </head>
  <body>
    <div class = "header">
      <nav>
        <div class = "nav-container">
          <a href = "#home"><img src = "Budget_Logo-removebg-preview (1).png" alt = "logo"></a>
          <ul class = "nav-links">
            <li><a href = "#home">Home</a></li>
            <li><a href = "#about">About</a></li>
            <li><a href = "#services">Services</a></li>
            <li><a href = "#">Products</a></li>
            <li><a href = "#testimonials">Testimonials</a></li>
            <li><a href = "#contact-us" class = "contact-us">Contact Us</a></li>
          </ul>
        </div>
      </nav>
      
      
  <section id = "home">
    <div class = "header-content">
      <h1>The Most Trusted <br> Hardware Store</h1>
      <h2>Building stronger communities <br> for over 20 years with quality hardware</h2>
    </div>
  </section>

     

        <section id = "services">
          <div class = "our-services">
            <div class = "wrapper">
              <h1>Our Services</h1>
              <p>For over 20 years, our hardware store has been serving the hardware needs of our customers. We offer a wide range of hardware products and solutions in fields such as:</p>
              <div class = "content-box">
                <div class = "card">
                  <i class = "fa fa-lightbulb-o" aria-hidden = "true"></i>
                  <h2>Electrical</h2>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio a accusantium consequatur ea nemo, autem unde et voluptates nihil soluta?</p>
                </div>
                <div class = "card">
                  <i class = "fa fa-tint" aria-hidden = "true"></i>
                  <h2>Plumbing</h2>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio a accusantium consequatur ea nemo, autem unde et voluptates nihil soluta?</p>
                </div>
                <div class = "card">
                  <i class = "fa fa-paint-brush" aria-hidden = "true"></i>
                  <h2>Paint</h2>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Opt
              </div>
            </div>
          </div>
        </div>
        </section>
        
   


        <section id = "about">
          <div class = "about-section">
            <section>
              <div class = "container">
                <h2>About Us</h2>
                <p>Welcome to Budget Builders Supplies! We are a Hardware company with over 20 years of experience.</p>
                <p>Our mission is to provide you the best service possible when it comes to your hardware needs. We believe in quality and excellent service.</p>
                <p>At Budget Builders Supplies, we strive to be your one stop shop for all your hardware needs.</p>
              </div>
            </section>
          </div>
        </section>
    




<div class = "count-up-stats">
  <h2 class = "text-center">
  </h2>

<div class = "project-counter-wrap">

<ul>
  <li>
    <i class = "fa fa-smile-o" aria-hidden = "true"></i>
<p id = "number1" class = "number">1000+</p>
<span></span>
<p>Happy Customers</p>
  </li>

  <li>
    <i class = "fa fa-clock-o" aria-hidden = "true"></i>
<p id = "number1" class = "number">20+</p>
<span></span>
<p>Years Experience</p>
  </li>

  <li>
    <i class = "fa fa-wrench" aria-hidden = "true"></i>
<p id = "number1" class = "number">500+</p>
<span></span>
<p>Products</p>
  </li>
</ul>
</div>

<section id = "testimonials">
  <div class = "testimonials">
    <div class = "inner">
      <h1>Our Testimonials</h1>
      <div class = "border"></div>
  
      <div class = "row">
        <div class = "col">
          <div class = "testimonial">
            <div class = "name">Full name</div>
            <div class = "stars">
              <i class = "fa fa-star" aria-hidden = "true"></i>
              <i class = "fa fa-star" aria-hidden = "true"></i>
              <i class = "fa fa-star" aria-hidden = "true"></i>
              <i class = "fa fa-star" aria-hidden = "true"></i>
              <i class = "fa fa-star" aria-hidden = "true"></i>
          </div>
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic sapiente assumenda numquam corporis maxime reiciendis nostrum quae, molestiae officiis expedita.</p>
  
        </div>
      </div>
  
      <div class = "col">
        <div class = "testimonial">
          <div class = "name">Full name</div>
          <div class = "stars">
            <i class = "fa fa-star" aria-hidden = "true"></i>
            <i class = "fa fa-star" aria-hidden = "true"></i>
            <i class = "fa fa-star" aria-hidden = "true"></i>
            <i class = "fa fa-star" aria-hidden = "true"></i>
            <i class = "fa fa-star" aria-hidden = "true"></i>
        </div>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic sapiente assumenda numquam corporis maxime reiciendis nostrum quae, molestiae officiis expedita.</p>
        
      </div>
    </div>
    <div class = "col">
      <div class = "testimonial">
        <div class = "name">Full name</div>
        <div class = "stars">
          <i class = "fa fa-star" aria-hidden = "true"></i>
          <i class = "fa fa-star" aria-hidden = "true"></i>
          <i class = "fa fa-star" aria-hidden = "true"></i>
          <i class = "fa fa-star" aria-hidden = "true"></i>
          <i class = "fa fa-star" aria-hidden = "true"></i>
      </div>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic sapiente assumenda numquam corporis maxime reiciendis nostrum quae, molestiae officiis expedita.</p>
      
    </div>
  </div>
    </div>
  </div>
</section>






<section id = "contact-us">
  
<footer>
  <div class = "footer-container">
    <div class = "contact-info">
      <h4>Contact Us</h4>
      <ul>
        <li>Street Road</li>
        <li>Location</li>
        <li>Phone: 0******</li>
      </ul>
      <div class = "directions">
        <a href = "" target = "_blank" class = "btn">Get Directions</a>
      </div>
  
    </div>
    <div class = "hours">
      <h4>Opening Hours</h4>
      <ul>
        <li>Monday - Friday: 8am - 5pm</li>
        <li>Saturday: 8am - 2pm</li>
        <li>Sunday: Closed</li>
      </ul>
    </div>
  </div>
</footer>

</div>




    </div>
</section>

    
  </body>
</html>