'overflowing to right side of page

when i add the photos and "yayın akışı" text its getting to right side of page just like the images

2.problem is: there is 3 big photos , behind these photos gray line part is not fit to page

ps:solved ; problem was in the search box so i deleted it

https://i.stack.imgur.com/jArx0.jpg

https://i.stack.imgur.com/xN2Me.jpg

https://i.stack.imgur.com/O3bGp.jpg

.start{

    margin: 0;
    padding: 0;
    height: 40.7vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: whitesmoke;
}
.image{
    width: 450px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    margin: 0 9px;
}
.image img{
    width: 100%;
}
p{
    font-size: 17px;
    text-align: justify;
    line-height: 26px;
    margin-top: 20px;
}

*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: "Open Sans",sans-serif;
}

header{
  height: 90px;
  background: #2f3640;
}

.inner-width{
  max-width: 2000px;
  padding: 0 40px;
  margin: auto;
}

.logo{
  float: left;
  padding: 15px 0;
}

.logo img{
  height: 62px;
}


.navigation-menu{
  float: right;
  display: flex;
  align-items: center;
  min-height: 90px;
}

.navigation-menu a{
  margin-left: 10px;
  color: #ddd;
  text-transform: uppercase;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 4px;
  transition: .3s linear;
}

.navigation-menu a:hover{
  background: #fff;
  color: #2f3640;
  transform: scale(1.1);
}

.navigation-menu i{
  margin-right: 8px;
  font-size: 16px;
}

.home{
  color: #ff6b6b;
}

.about{
  color: #0abde3;
}

.works{
  color: #feca57;
}

.team{
  color: #5f27cd;
}

.contact{
  color: #1dd1a1;
}

.menu-toggle-btn{
  float: right;
  height: 90px;
  line-height: 90px !important;
  color: #fff;
  font-size: 26px;
  display: none !important;
  cursor: pointer;
}

}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="css/menubar.css">
    <link rel="stylesheet" href="css/style.css">
    <title>Alba</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
  </head>
  <body>
    <header>
          <div class="inner-width">
            <a href="#" class="logo"><img src="images/AAAALBA_thumbnail.png" alt=""></a>
            <i class="menu-toggle-btn fas fa-bars"></i>
            <nav class="navigation-menu">
              <a href="#"><i class="fas fa-home home"></i> Anasayfa</a>
              <a href="#"><i class="fas fa-align-left about"></i> Hakkımızda</a>
              <a href="#"><i class="fab fa-buffer works"></i> Çalışmalar</a>
              <a href="#"><i class="fas fa-users team"></i> Yazarlar</a>
              <a href="#"><i class="fas fa-headset contact"></i> İletişim</a>
              <a href="sistemler/login.php"><i class="hesap"></i>Giriş Yap</a>
            </nav>
          </div>
    </header>
    <div class = "start">
      <div class = "image" >
       <a href = "https://www.youtube.com/">
       <img src = "images/1.jpg" alt = "">
       </a>
      </div>
      
      <div class = "image" >
       <a href = "https://www.youtube.com/">
       <img src = "images/2.jpg" alt = "">
       </a>
      </div>
      
      <div class = "image" >
       <a href = "https://www.youtube.com/">
       <img src = "images/3.jpg" alt = "">
       </a>
      </div>
    </div>
  </body>
</html>
htmlcss


Solution 1:[1]

Set body{ width:100%; overflow-x: hidden;} and you wont have that anymore.

And edit class inner-width to set max-width: 100vw; instead of 2000px;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions