使正文内容占浏览器宽度的100％

Question

我正在使用CSS和HTML创建网页，并且正在尝试使其具有响应性。问题是，当我使用开发工具检查页面时，由于某种原因，页面的内容似乎没有占据窗口的100％，而我却找不到原因。为什么我的内容不能扩展到100％？这是一张图片：

https://imgur.com/a/wGTmeVq

* {
  padding: 0px;
  margin: 0px;
  font-family: 'Segoe UI', sans-serif;
}

body {
  overflow-x: hidden;
  height: 100%;
  width: 100%;
}

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  height: 50%;
}

.content {
  width: 100%;
}

.header {
  height: 8%;
}

.nav-h1 {
  text-align: center;
  width: 250px;
  height: 110px;
  margin-top: 27px;
  font-size: 40px;
  background-image: url(/assets/images/logo.svg);
  background-repeat: no-repeat;
  background-size: cover;
}

.content-inside {
  width: 100%;
}

a {
  display: inline-block;
  margin: 10px;
  font-family: 'Segoe UI', sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #01568a !important;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

.a-container {
  margin-left: 10%;
  margin-top: 27px;
}

.footer {
  background-color: #e8e8e8;
  height: 300px;
  width: 100%;
  padding-bottom: 0px;
}

.alignleft {
  margin-left: 8%;
  font-family: 'Segoe UI', sans-serif;
  font-size: 18px;
  font-weight: 900;
  color: #000000;
}

.alignright {
  margin-right: 8%;
  display: flex;
  flex-direction: row;
}

.logo-section {
  margin-top: 1.3%;
  margin-left: 2%;
}

.logo-img {
  padding: 6px;
}

.first-section {
  width: 100%;
  background-image: url("/assets/images/first-logo.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.first-section-p {
  width: 400px;
  height: 314px;
  margin-left: 10%;
  padding-top: 10%;
  font-family: 'Segoe UI', sans-serif;
  font-weight: bold;
  font-size: 4vh;
  font-weight: 900;
  text-align: center;
  color: #01568a;
}

.small-button {
  width: 331px;
  height: 92px;
  background-color: #e7af17;
  font-family: 'Segoe UI', sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: white;
  border: none;
}

.second-section-text {
  color: #e8e8e8;
  font-weight: 900;
  font-size: 120px;
  line-height: 0.7;
  font-family: 'Segoe UI', sans-serif;
}

.second-section {
  margin-top: 100px;
  display: flex;
  justify-content: center;
}

.third-section {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
  margin-top: 100px;
  background-color: #e8e8e8;
}

.third-section-right-part {
  margin-left: 50px;
  margin-top: 5%;
}

.third-section-right-part-img {
  height: 300px;
  width: 300px;
}

.third-section-left-part {
  width: 20%;
  margin-top: 7%;
  z-index: 3;
}

.forth-section {
  height: 500px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.info-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 50px;
  margin-right: 7%;
  width: 36%;
  background-color: #e7af17;
}

.info-box-content {
  text-align: center;
}

button {
  width: 330px;
  height: 65px;
  background-color: #ffffff;
  font-size: 28px;
  font-weight: bold;
  font-family: 'Segoe UI', sans-serif;
  color: #01568a;
  border: none;
  text-transform: uppercase;
}

.info-box-content-h1 {
  color: #ffffff;
  font-family: 'Segoe UI', sans-serif;
  font-size: 60px;
  font-weight: bold;
}

.info-box-content-p {
  font-family: 'Segoe UI', sans-serif;
  font-size: 18px;
  font-weight: 300;
  font-stretch: normal;
  color: #ffffff;
}

.message {
  width: 60%;
  margin-left: 13%;
  margin-top: 2%;
  font-family: 'Segoe UI', sans-serif;
}

.second-section-right-part {
  width: 50%;
  margin: 0 auto;
  margin-left: 30%;
}

.second-section-right-part-h3 {
  margin-top: 30px;
  color: #01568a;
  font-weight: bold;
}

.second-section-right-part-p {
  font-family: 'Segoe UI', sans-serif;
  margin-top: 30px;
}

.plus {
  color: orange;
}

.second-section-paragraphs {
  position: absolute;
  margin-top: 6%;
  margin-left: -16px;
  z-index: -10;
}

.second-se {
  color: #01568a;
  font-weight: bold;
}

.third-section-text {
  font-size: 140px;
  font-weight: 900;
  font-size: 120px;
  line-height: 0.7;
  font-family: 'Segoe UI', sans-serif;
  color: white;
  position: relative;
}

.third-section-paragraphs {
  position: absolute;
  z-index: 1;
  margin-left: -5%;
  margin-top: -10;
}

.forth-section-p {
  font-size: 140px;
  font-weight: 900;
  font-size: 120px;
  line-height: 0.9;
  font-family: 'Segoe UI', sans-serif;
  color: #e8e8e8;
}

.forth-section-paragraphs {
  width: 45%;
  margin: 0 auto;
  margin-top: 5%;
}

.third-section-paragraphs {
  z-index: -1;
  margin-left: -8%;
}

.third-section-paragraphs {
  position: absolute;
  z-index: 1;
  margin-left: -5%;
  margin-top: -10;
}

.third-section-paragraphs {
  z-index: -1;
  margin-top: -44px;
}

.plus-sign {
  color: #e7af17;
  margin-right: 10px;
}

@media (min-width: 1281px) {
  .first-section {
    width: 100%;
    height: 800px;
    background-image: url("/assets/images/first-logo.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
  .small-button {
    width: 331px;
    height: 92px;
    margin-top: 8%;
    margin-left: 12%;
    background-color: #e7af17;
    font-family: 'Segoe UI', sans-serif;
    font-size: 18px;
    font-weight: 900;
    color: white;
    border: none;
  }
}

@media (min-width: 940px) {
  .small-button {
    width: 331px;
    height: 92px;
    margin-top: 8%;
    margin-left: 12%;
    background-color: #e7af17;
    font-family: 'Segoe UI', sans-serif;
    font-size: 18px;
    font-weight: 900;
    color: white;
    border: none;
  }
}

@media (max-width: 1264px) {
  .first-section-p {
    font-size: 20px;
  }
  .small-button {
    margin-left: 0%;
    margin-top: 1%;
  }
  .footer {
    height: 100%;
    width: 100%;
  }
  .info-box {
    margin-right: 0%;
    width: 100%;
  }
}

@media (max-width: 809px) {
  .first-section-p {
    font-size: 20px;
  }
  .small-button {
    margin-left: 0%;
    margin-top: 1%;
  }
  .second-section-right-part {
    margin-left: 25%;
  }
  .footer {
    height: 100%;
    width: 100%;
  }
}

@media (max-width: 500px) {
  .first-section-p {
    font-size: 20px;
  }
  .small-button {
    margin-left: 0%;
    margin-top: 1%;
  }
  .second-section-right-part {
    margin-left: 25%;
  }
  .footer {
    height: 100%;
    width: 100%;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="/css/main.css">


  <title>Home</title>
</head>

<body>
  <div class="main-container">
    <div class="headers">
      <div class="nav">
        <a class="nav-h1"></a>
        <a href="" class="logo"></a>
        <div class="a-container">
          <a href="/index.html">Home</a>
          <a href="/pages/about.html">About</a>
          <a href="/pages/solutions.html">Solutions</a>
          <a href="/pages/team.html">Team</a>
          <a href="/pages/contact.html">Contact</a>
        </div>
        <div class="logo-section">
          <img class="logo-img" src="/assets/images/facebook.png" alt="facebook logo">
          <img class="logo-img" src="/assets/images/linkedin.png" alt="linkedin logo">
        </div>
      </div>
    </div>
    <div class="content">
      <div class="content-inside">
        <div class="first-section">
          <p class="first-section-p">Turnkey platforms <br> for businesses looking to rule the online market
            <button class="small-button">LEARN MORE</button>
          </p>
        </div>
        <div class="second-section">
          <div class="second-section-right-part">
            <div class="second-section-paragraphs">
              <p class="second-section-text">WHAT</p>
              <p class="second-section-text">WHE DO</p>
              <p class="second-section-text">BEST</p>
            </div>
            <section class="second-section-right-part">
              <div>
                <h3 class="second-section-right-part-h3"><span class="plus-sign">+</span> Media</h3>
                <p class="second-section-right-part-p">Social Media Offering a 360 degree solution to generating exposure via Social Media Marketing. Using both ATL and BTL strategies in large social networks such as Facebook and Linkedin but also in small networks when seeking a specific
                  demographic target.</p>
              </div>
            </section>
            <section class="second-section-right-part">
              <div>
                <h3 class="second-section-right-part-h3"> <span class="plus-sign">+</span>Sub-Affiliation</h3>
                <p class="second-section-right-part-p">Sub-Affiliation Genuinely strengthen your brand and jump start traffic with an affiliate program. Link with a large scale business led supply chain, monitor activity and generate returns through an exponentially growing platform.
                </p>
              </div>
            </section>
            <section class="second-section-right-part">
              <div>
                <h3 class="second-section-right-part-h3"> <span class="plus-sign">+</span>Mobile Adds
                </h3>
                <p class="second-section-right-part-p">Mobile Adds A multi-channeled platform tailor made for the mobile environment allowing ease of access, real time delivery and results driven optimization solutions allowing for cost efficient lead capture.
                </p>
              </div>
            </section>
          </div>
        </div>
        <div class="third-section">
          <div class="third-section-left-part">
            <div class="third-section-paragraphs">
              <p class="third-section-text">ABOUT</p>
              <p class="third-section-text">US</p>
            </div>
            <h4 class="second-se">Leading The Way</h4>
            <br>
            <p class="third-section-left-part-p"> dynamic Online Media Powerhouse fueled with passion for developing and growing online businesses into world renowned enterprises. Putting a strong accent on online marketing solutions, Vici is one step ahead of the game with superior data
              management systems and prompt on key response time.
              <br><br> Streamlined by future oriented workflow methodology, Vici are a resilient group of focused and dedicated specialists that have a profound understanding of their duties and priorities.</p>
          </div>
          <div class="third-section-right-part">
            <section>
              <img src="/assets/images/people-laughing.png" alt="" class="third-section-right-part-img">
            </section>
          </div>
        </div>
        <div class="forth-section-paragraphs">
          <p class="forth-section-p">LET'S WORK TOGETHER?</p>
        </div>
        <div class="forth-section">
          <div class="info-box">
            <div class="info-box-content">
              <h1 class="info-box-content-h1">The Mission is Simple</h1>
              <p class="info-box-content-p">
                To Strategically Drive The Online Community Forward, Through A Wide Spectrum Integrating Market Intelligence And Experience Throughout, By Offering Unparalleled Resources And A True Understanding Of The Client’s Arena. </p>
              <br>
              <button>Contact Us &nbsp; >> </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="nav">
        <h5 class="nav-h1"></h5>
        <div class="a-container">
          <a href="/index.html">Home</a>
          <a href="/pages/about.html">About</a>
          <a href="/pages/solutions.html">Solutions</a>
          <a href="/pages//team.html">Team</a>
          <a href="/pages/contact.html">Contact</a>
        </div>
        <div class="logo-section">
          <img class="logo-img" src="/assets/images/facebook.png" alt="facebook logo">
          <img class="logo-img" src="/assets/images/linkedin.png" alt="linkedin logo">
        </div>
      </div>
      <p class="message">*Please read the Privacy Policy and Terms & Conditions before continuing. <br> Use of our Services and Brokers websites is at your own risk. Information on our Website, applications and any marketing or email marketing material is strictly for information
        purposes and should not be construed as professional advice nor as an offer to engage in online trading, which may result in substantial or complete loss of funds.
      </p>
    </div>
  </div>
</body>

</html>

Answer 1

要拉伸内容，请使用视口和 vh 之类的视口单位，而不要使用％或 px ，因为它不仅可以将您的内容扩展到整个屏幕，还可以使其具有响应性，从而可以在所有屏幕分辨率下使用。

它肯定会解决您的问题，但是如果您遇到任何问题，请评论它，我会尽力解决。

Answer 2

我刚刚检查了您的代码，并没有采用完整的代码，原因是您那里有一些文本（例如：“ LET'S WORK TOGETHER”），其中有一个font-size的{​​{1}}容器120px只有width的那个。减少45%并增加font-size，您将看到它如何占据全角。

添加此内容以查看区别：

width

看看.third-section-text, .forth-section-p { font-size:60px; } .forth-section-paragraphs { width:60%; } 是如何使您产生问题的，这可能是因为它所在的空间不够大。当您扩大窗口大小时，您将意识到，一旦屏幕上有足够的空间将内容放到45％的宽度中，问题就会消失。