Белый отступ(полоса) справа при уменьшении окна браузера, как убрать и что его создает?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <div class="bg">
      <header>
        <div class="container">
          <div class="header">
            <img
              class="logo"
              width="70px"
              height="25px"
              src="./images/Seqty.png"
              alt="logo"
            />
            <nav class="menu">
              <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Programs</a></li>
                <li><a href="#">Resources</a></li>
                <li><a href="#">Contacts</a></li>
              </ul>
            </nav>
            <button class="button">Security Estimate</button>
          </div>
        </div>
      </header>
      <section class="main">
        <div class="container main">
        <div class="first__block">
          <h1>DIY Home Security Systems & WiFi Security Cameras</h1>
          <p>
            Top-rated smart home security systems and security cameras that<br />
            offer everything you need to keep your family or business safe.
            Set<br />
            up in minutes with no tools required.
          </p>
          <button class="play">
            <img class="play__button" src="./images/play.png" alt=" " />
            <a class="play__text">Watch Overview</a>
          </button>
        </div>
        <div class="second__block">
          <img class="Camera" src="./images/Camera_RGB.png" alt="Камера" />
        </div>
      </section>
    </div>
    <section class="about__smartphones">
          <div class="container__second-lpx">
              <div class="text-content">
                <h2>More than home security. 
                  Full smart home integrations.
                </h2> 
                <img src="" alt="">
              </div>
          </div>
    </section>
  </body>
</html>


<code lang="css">

</code>
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: 0;
}

button {
  outline: 0;
  background: none;
  cursor: pointer;
}

a {
  text-decoration: none;
  color: black;
}

.bg {
  background-image: url(../images/Vector.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: top center;
}

.container {
  max-width: 1520px;
  margin: 0 auto;
}

.container__second-lpx {
  max-width: 1440px;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 50px;
}

.header .menu ul {
  display: flex;
  list-style: none;
}

.header .menu ul li {
  padding: 0 15px;
}

.header .menu ul li a {
  font-size: 18px;
  line-height: 28px;
  color: #f4f6f8;
}

.button {
  font-size: 18px;
  line-height: 27px;
  color: #f4f6f8;
  padding: 15px 30px;
  border: 1px solid white;
  border-radius: 28px;
}

.main {
  display: flex;
  justify-content: space-between;
}

.main h1 {
  font-size: 74px;
  line-height: 130%;
  color: #f4f6f8;
  max-width: 680px;
  margin-bottom: 24px;
}

.main p {
  font-size: 20px;
  line-height: 180%;
  color: #ffffff;
  max-width: 680px;
  margin-bottom: 60px;
}

.play {
  font-size: 20px;
  line-height: 100%;
  color: #fff;
  background: #636363;
  opacity: 0.5;
  border-radius: 33px;
  vertical-align: middle;
}

.play__text {
  padding: 0px 40px 0px 20px;
  vertical-align: middle;
}

.play__button {
  vertical-align: middle;
  padding: 15px 0px 15px 20px;
}

.first__block {
  margin-top: 132px;
}

.second__block {
  margin-top: 100px;
}
  • Вопрос задан
  • 138 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы