Содержимое тела в HTML не во весь экран, хотя установить ширину 100% в CSS? когда отзывчивый - PullRequest
Новая
       6

Содержимое тела в HTML не во весь экран, хотя установить ширину 100% в CSS? когда отзывчивый

1 голос
/ 29 мая 2020
• 1000 *enter image description here 

/* Here is my CSS *style.css* */

* {
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  width: 100%;
}


/* style for header section */

h1 {
  line-height: 65px;
  font-size: 48px;
}

.header-container {
  background-image: linear-gradient( 0deg, rgba(35, 39, 49, -0.18), rgba(35, 39, 49, 1.82)), url("images/bg-image.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  height: 743px;
  left: -1px;
  top: 0px;
}

.nav-bar {
  position: absolute;
  width: 1700px;
  height: 135px;
  left: 69px;
  top: 17px;
  filter: brightness(100%);
}

.header-logo {
  float: left;
}

.nav-content {
  list-style-type: none;
}

.menu-section {
  width: 50%;
  float: right;
  margin-top: 34px;
}

.menu-item {
  float: left;
  display: block;
  margin-right: 70px;
}


/* nav menu */

.nav-content li a {
  text-decoration: none;
  color: #fff;
  font-size: 20px;
}

.nav-content li a:hover {
  color: #00B9F7;
}


/* header title */

.header-title {
  color: #fff;
  text-align: center;
  margin: auto;
  width: 30%;
  padding: 10px;
  margin-top: 10%;
}


/* header video */

.header-video {
  margin-left: 30%;
  width: fit-content;
}
<!-- here is my HTML code *index.html* -->

<header class="header-container">
  <div class="header-content">
    <div class="nav-bar">
      <div class="header-logo">
        <a href="#">
          <img id="image-logo-header" class="bottom img-logo" src="images/logo.png">
        </a>
      </div>

      <div class="menu-section">
        <div class="menu-btn-group">
          <div class="menu-toggle"></div>
          <div class="menu-close"></div>
        </div>
        <div class="navigation navbar-collapse ">
          <nav role="navigation">
            <ul class="nav-content">
              <li class="menu-item"><a class="active-item" href="#">Home</a></li>
              <li class="menu-item"><a href="#">Blog</a></li>
              <li class="menu-item"><a href="#">About</a></li>
              <li class="menu-item"><a href="#">Contact</a></li>
              <li class="menu-item"><a href="#">Login</a></li>
              <li class="menu-item"><a href="#">Sign up</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </div>

    <div class="header-title">
      <h1>SHARE YOUR HOLIDDAY DREAM</h1>
    </div>

    <div class="header-video">
      <img class="video-img" src="images/video-img.png">
    </div>
  </div>
</header>

Кто-нибудь может мне помочь, пожалуйста? Ваш ответ - мое счастье, большое вам спасибо

Ответы [ 2 ]

1 голос
/ 29 мая 2020

Это происходит потому, что в вашем коде вы установили ширину фона на 100%, что работает нормально, но при использовании адаптивного дизайна фоновое изображение не заполняет экран.

Поскольку фоновое изображение заполняет 100% ширина вашего адаптивного контейнера, но пустое пространство, которое вы видите справа, связано с навигационной панелью, вы установили ее фиксированную ширину на 1700 пикселей.

Чтобы решить эту проблему, сделайте вашу навигационную панель отзывчивой, чтобы что он также может устанавливать свою ширину в соответствии с контейнером.

Вы можете использовать 

.nav-bar {
         position: absolute;
         width: 100%;
         height: 135px;
         left: 69px;
         top: 17px;
         filter: brightness(100%);
     }

width: 100%, чтобы ваш nav-bar тоже реагировал.

0 голосов
/ 29 мая 2020

Вы можете попробовать использовать img: { width: 100vw };?

В css проверьте поля и отступы.

...