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

Question

I am creating a webpage using CSS and HTML and I am trying to make it responsive. The problem is that when I use the dev tools to inspect the page it seems that the content of the page does not take 100% of the window for some reason and I can't find out why. Why doesn't my content stretch to 100%? Here is a picture:

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

To stretch your content use Viewport Units like vw and vh instead of % or px for all elements because it will not only stretch your content to whole screen, it will also make it responsive so that it can be used on all screen resolutions.

It will surely solve your issue but if you face any problem comment it and I will try my best to solve it.

Answer 2

I just inspected your code and the reason it's not taking full width it because you have some text there (for example: "LET'S WORK TOGETHER") which has a font-size of 120px in a container that has a width of only 45% . Reduce the font-size and increase the width you will see how it will take full width.

add this to see the differnce:

.third-section-text, .forth-section-p {
   font-size:60px;
}

.forth-section-paragraphs {
   width:60%;
}

See how the font-size is making you the problem is dose not fit in the space it has. You will realize as you expand the window size that the issue is going away once the screen has enough room to put your content in the 45% width.