尽管在 CSS 中将宽度设置为 100%，但 HTML 中的正文内容不是全屏？响应时

Question

在正常情况下（还没有响应）我的网站运行很好，但是在我为我的网站设置了响应（宽度：1336px）之后它的显示屏幕是这样的，尽管我为此设置的宽度是 100 %

/* 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>

有人能帮帮我吗？你的回答就是我的幸福，非常感谢

Answer 1

你可以尝试使用 img: { width: 100vw }; 吗？

在 css 中，验证边距和填充。

Answer 2

发生这种情况是因为在您的代码中，您已将背景宽度设置为 100%，这可以正常工作，但是当您使用响应式设计时，背景图像不会填满屏幕。

因为背景图像填充了响应式容器的 100% 宽度，但您在右侧看到的空白 space 是因为导航栏，您已将其宽度设置为固定为 1700 像素。

要解决此问题，请使您的导航栏具有响应性，以便它也可以根据容器设置其宽度。

您可以使用

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

width: 100% 让您的 nav-bar 也响应迅速。

尽管在 CSS 中将宽度设置为 100%，但 HTML 中的正文内容不是全屏？响应时

Body content in HTML not full screen although set width 100% in CSS? when responsive

html

css

responsive