Question 45225 in Html Question posted in
Some basic documentation can be found here.

Divs don't stretch to fill screen – Html

Just finished a mini project and everything seemed to be going accordingly until I completed the footer this page. For each section, the divs do not stretch to the end, which wasn’t an issue before. I’m assuming it’s something to do with the pixels on the page?

Notice the gap on the left/right of the screen:

enter image description here

enter image description here

HTML:

    <body>
        <div class="header">
            <div class="header-left">
                <div class="logo">Header Logo</div>
            </div>
            <div class="header-right">
                <div class="links-top">
                   <li><a href="#">header link one</a></li>
                   <li><a href="#">header link two</a></li>
                   <li><a href="#">header link three</a></li> 
                </div>
            </div>
        </div>
        <div class="hero">
        <div class="hero-left-head">
            <h1>This website is awesome</h1>
            <p>This website has some subtext that goes here under the main title. It’s a smaller font and the color is lower contrast.</p>
            <button class="hero-button">Sign Up</button>
        </div>
        <div class="sade">
            <img src="https://s3.us-east-1.amazonaws.com/vnda-cockpit/www-streetopia-me/2020/09/11/5f5bfd8c2bb85sade01.jpg" alt="sade" height="200" width="350">
        </div>
    </div>
    <div class="middle">
        <div class="title"><h1>Some Information?</h1></div>
        <div class="bmw-pics">
            <div class="bmw-text">
            <img src="https://aprperformance.com/wp-content/uploads/2015/01/BMW_M4_Lip_Installed_LR_7.jpg" alt="puke-green">
            <p>Puke Green</p>
        </div>
        <div class="bmw-text">
            <img src="https://cdn.bmwblog.com/wp-content/uploads/2015/03/Yas-Marina-Blue-BMW-F80-M3-Gets-Some-Essential-Updates-7.jpg" alt="yas">
            <p>Yas Marina</p>
        </div>
        <div class="bmw-text">
            <img src="https://f80.bimmerpost.com/forums/attachment.php?attachmentid=2671354&stc=1&d=1628858312" alt="Frost White">
            <p>Frost White</p>
        </div>
        <div class="bmw-text">
            <img src="https://1c2a8a2161d644d95009-22d26b38e78c173d82b3a9a01c774ffa.ssl.cf1.rackcdn.com/image/projectcars/f80m3/f80_m3_carbon_mirror_covers_7_w705.jpg" alt="Imola Red">
            <p>Imola Red</p>
        </div>
      </div>
    </div>
    <div class="above-footer">
        <div class="above-footer-p1">
        <p>If you do what you've always done, then you'll get what you've always had, you dumb buffons!</p>
    </div> 
        <div class="above-footer-p2">
            <p>- A Wise Prophet</p>
    </div>
   </div>
   <div class="last-space">
    <div class="blue-box">
        <div class="action"><strong>Call to action! It's time!</strong></div>
        <div class="product-bit">Sign up for our product by clicking the button to your right :)</div>
        <button class="last-button">Sign Up!</button>
    </div>
   </div>
   <div class="footer">
    <p>Copyright © The Odin Project 2021</p>
   </div>
  </body>

CSS:

.header {
    background-color: #1F2937;
    display: flex;
    justify-content: space-around;
    color: #f9faf8;
    font-size: 24px;
    padding: 10px;
}

.links-top {
    list-style-type: none;
    display: flex;
    margin: 0;
    padding: 0;
    gap: 16px;
    font-size: 20px;
}

a {
    text-decoration: none;
    color: #f9faf8;
}

p {
    font-size: 15px;
}

.hero {
    display: flex;
    flex-direction: row;
    background-color: #1F2937;
    gap: 50px;
    align-items: center;
    justify-content: center;
    padding-bottom: 30px;
}

.hero-left-head {
    font-size: 24px;
    color: #f9faf8;
}

.sade {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.hero-button {
    background-color: #3882F6;
    color:#f9faf8;
    border-radius: 25px;
    padding: 0;
    height: 30px;
    width: 100px;
}

.middle {
    display: flex;
    flex-direction: column;
    color:#1F2937;
}

.bmw-pics {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    gap: 20px;
}

.bmw-text img {
    height: 260px;
    border-radius: 10px;
    width: 250px;
}

.bmw-text p {
    text-align: center;
}

.title {
    text-align: center;
}

.above-footer {
    background-color: #e5e7eb;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.above-footer-p1 p,
.above-footer-p2 p {
    font-size: 36px;
}

.above-footer-p2 {
    display: flex;
    justify-content: flex-end;
    margin-right: 50px;
}

.above-footer-p1 p {
    font-style: italic;
    margin-top: 100px;
    color: #1F2937;
    display: flex;
    align-items: center;
    justify-content: center;
}

.last-space {
    color: #f9faf8;
    display: flex;
    justify-content: center;
    align-items: center;
}

.blue-box {
    display: flex;
    background-color: #3882F6;
    width: 800px;
    margin: 50px;
    flex-direction: column;
    padding: 50px;
    border-radius: 15px;
}

.last-button {
    align-self: flex-end;
    padding:5px 25px 5px 25px;
    color:#F9FAF8;
    background-color: #3882F6;
    border-radius: 10px;
    border-color: #F9FAF8;
    justify-content: center;
}

.footer {
    background-color: #1F2937;
    color: #F9FAF8;
    display: flex;
    justify-content: center;
    align-items: center;
}

Please forgive the extensive css sheet, I’m still learning 🙂 Any help is greatly appreciated!

Tags:

2

Answers


  1. 0

    There’s margin on the body. By default the body element has 8px of margin on all sides. You can resolve this by adding this CSS to your project:

    body {
  margin: 0;
}

    Some call this a CSS reset. You can learn more here. Hope this helps!

    Login or Signup to reply.
  2. 0

    It’s because the body html element (along with many other elements) has margin automatically applied. You can just clear it by adding this to your CSS:

    body { 
  margin: 0px
}

    You might want to try using something like Normalize.css for your projects. It really removes a lot of these "why is this happening" issues related to CSS. Also, you should read up on your browser’s Devtools (on Chrome, for example, you can click Ctrl+Shift+i and it will open. You can then inspect specific elements and it will tell you why a certain element has a certain style.

    For example, you can see that by hovering over the first paragraph of your post that it has a margin-bottom of 1.1em because it is selected by .s-prose p.

    Hope that helps!

    Picture of Chrome devtools

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search