Home > Net >  My background colors do not fill the width of the screen
My background colors do not fill the width of the screen

Time：12-10

In my css code i am trying to create a footer and my background color will not fill the width of the screen(the same happened earlier)

Here is what it looks like. (https://i.stack.imgur.com/5VxYU.png)

html code:

*{
    margin: 0;
    padding: 0%;
    box-sizing: border-box;
}

@font-face {
    font-family: "Sodo Sans";
    src: url("/fonts/sodo-sans-regular.woff2") format("woff2"),
         url("/fonts/sodo-sans-regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;


}

body{
    font-family: "Sodo Sans", sans-serif;
}

.navbar{
    display: flex;
    align-items: center;
    padding: 20px;
}

nav{
    flex: 1;
    text-align: right;
}

nav ul{
    display: inline-block;
    list-style-type: none;
}

nav ul li{
    display: inline-block;
    margin-right: 20px;
}

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

p{
    color: #555;
}

.container{
    max-width: 1300px;
    margin: auto;
    padding-left: 25px;
    padding-right: 25px;

}

.row{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
}

.col-2{
    flex-basis: 50%;
    min-width: 300px;
}

.col-2 img{
    max-width: 100%;
    padding: 50px 0;
    width: 450px;
}
.col-2 h1{
    font-size: 50px;
    line-height: 60px;
    margin: 25px 0;
}

.btn{
    display: inline-block;
    background: #069972;
    color: #fff;
    padding: 8px 30px;
    margin: 30px 0;
    border-radius: 30px;
    transition: 0.5s;
}

.btn:hover{
    background: inherit
}


.header{
    background: radial-gradient(#fff,#ffd6d6);
}

.header .row{
    margin-top: 70px;
}

.catagories{
    margin: 70px 0;
}

.col-3{
    flex-basis: 30%;
    min-width: 250px;
    margin-bottom: 30px;
}

.col-3 img{
    width: 100%;
}

.small-container{
    max-width: 1080px;
    margin: auto;
    padding-left: 25px;
    padding-right: 25px;
}

.col-4{
    flex-basis: 25%;
    padding: 10px;
    min-width: 200px;
    margin-bottom: 50px;
    position: relative;
    transition: 0.3s ease-in-out;
}
.col-4 img{
    width: 100%;
}
.title{
    text-align: center;
    margin: 0 auto 80px;
    position: relative;
    line-height: 60px;
    color: #555;
}

.title::after{
    content: '';
    background: #073eb6;
    width: 80px;
    height: 5px;
    border-radius: 5px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

h4{
    color: #555;
    font-weight: normal;
}
.col-4 p{
    font-size: 14px;
}

.col-4:hover{
    top: 5px;
}
/*------------- offer -------------*/
.offer{
    background: radial-gradient(#fff, #ffd6d6);
    margin-top: 80px;
    padding: 30px 0;
}

.col-2 .offer-img{
    padding: 50px;
}
small{
    color: #555;
}

/*------------- testimonial -------------*/
.testimonial{
    padding-top: 100px;
}

.testimonial .col-3{
    text-align: center;
    padding: 40px 20px;
    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: 0.5s;
}

.testimonial .col-3 img{
    width: 50px;
    margin-top: 20px;
    border-radius: 50%;
}

.testimonial .col-3:hover{
    transform: translateY(-10px);
}

.fa.fa-quote-left{
    font-size: 34px;
    color: orange;
}

.col-3 p{
    font-size: 15px;
    margin: 12px 0;
    color: #777;
}

.testimonial .col-3 h3{
    font-weight: 600;
    color: #000;
    font-size: 19px;
}

/*------------- brands -------------*/

.brands{
    margin: 100px auto;
}

.col-5{
    width: 160px;
}

.col-5 img{
    width: 100%;
    cursor: pointer;
    filter: grayscale(100%);
    transition: 0.25s;
}

.col-5 img:hover{
    filter: grayscale(0);
}


/*------------- footer -------------*/
.footer{
    background: #000;
    color: #8a8a8a;
    font-size: 14px;
    padding: 60px 0 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Your Ecommerce Name.</title>
</head>
<body>

<div >
    <div >
        <div >
            <div >
                <img src="logo.png" width="125px" alt="My logo">
            </div>
            <nav>
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">Shop</a></li>
                    <li><a href="">Contacts</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Account</a></li>
                </ul>
            </nav>
            <img src="cart.png" width="30px" height="30px" alt="">
        </div>
        <div >
            <div >
                <h1>Eccomerce</h1>
                <p>
                    Ecommerce has become an increasingly popular way for businesses<br>
                    and individuals to buy and sell goods and services online. With the <br>
                    rise of the internet and advancements in technology, it is now easier<br>
                    than ever to set up an online store and reach a global audience.<br>
                    Ecommerce allows for a more convenient and cost-effective way to<br>
                    conduct transactions, and has opened up new opportunities for <br>
                    entrepreneurs and consumers alike.
                </p>

                <a href=""> Explore now! &#8594;</a>
                </div>

            <div >
                <img src="reference.png" alt="Your Reference photo.">
            </div>
        </div>
    </div>
</div>
<!---------- featured catagories ---------->
    <div >
        <div >   
        <div >
            <div >
                <img src="catagory.png" alt="">
            </div>
            <div >
                <img src="catagory.png" alt="">
            </div>
            <div >
                <img src="catagory.png" alt="">
            </div>
        </div>
        </div>
    </div>
<!---------- featured products ---------->
    <div >
        <h2 >Featured Products</h2>
        <div >
            <div >
                <img src="product.png" alt="">
                <h4>Product name</h4>
                <p>Price</p>
            </div>
            <div >
                <img src="product.png" alt="">
                <h4>Product name</h4>
                <p>Price</p>
            </div>
            <div >
                <img src="product.png" alt="">
                <h4>Product name</h4>
                <p>Price</p>
            </div>
            <div >
                <img src="product.png" alt="">
                <h4>Product name</h4>
                <p>Price</p>
            </div>
            
        </div>
        <h2 > Latest Products</h2>
        <div >
            <div >
                <img src="product.png" alt="">
                <h4>Product name</h4>
                <p>Price</p>
            </div>
            <div >
                <img src="product.png" alt="">
                <h4>Product name</h4>
                <p>Price</p>
            </div>
            <div >
                <img src="product.png" alt="">
                <h4>Product name</h4>
                <p>Price</p>
            </div>
            <div >
                <img src="product.png" alt="">
                <h4>Product name</h4>
                <p>Price</p>
            </div>
        </div>
        <div >
            <div >
                <img src="product.png" alt="">
                <h4>Product name</h4>
                <p>Price</p>
            </div>
            <div >
                <img src="product.png" alt="">
                <h4>Product name</h4>
                <p>Price</p>
            </div>
            <div >
                <img src="product.png" alt="">
                <h4>Product name</h4>
                <p>Price</p>
            </div>
            <div >
                <img src="product.png" alt="">
                <h4>Product name</h4>
                <p>Price</p>
            </div>
    </div>
<!---------- offers ---------->
    <div >
        <div >
            <div >
                <div >
                    <img src="product.png" class ="offer-img" alt="">
                </div>
                <div >
                    <p>Special Offer!</p>
                    <h1>Product</h1>
                    <small>Information about product<br></small>
                    <a href="" >Buy Now! &#8594</a>
                </div>
            </div>
        </div>
    </div>

<!---------- testimonial ---------->
    <div >
        <div >
            <div >
                <div > 
                    <i ></i>
                    <p>Blah Blah Blah</p>

                    <div >
                        <i  ></i>
                        <i  ></i>
                        <i  ></i>
                        <i  ></i>
                        <i  ></i>
                    </div>

                    <img src="person1.jpg" alt="">
                    <h3>Rachel Gardener</h3>
                </div>
                <div > 
                    <i ></i>
                    <p>Blah Blah Blah</p>

                    <div >
                        <i  ></i>
                        <i  ></i>
                        <i  ></i>
                        <i  ></i>
                        <i  ></i>
                    </div>
                    <img src="person2.jpg" alt="">
                    <h3>Micheal Grove</h3>
                </div>
                <div > 
                    <i ></i>
                    <p>Blah Blah Blah</p>

                    <div >
                        <i  ></i>
                        <i  ></i>
                        <i  ></i>
                        <i  ></i>
                        <i  ></i>
                    </div>

                    <img src="person3.jpg" alt="">
                    <h3>Orion Maxwell</h3>
                </div>
            </div>
        </div>
    </div> 
    
<!---------- brands ---------->
    <div >
        <div >
            <div >
                <div >
                    <img src="spotify.png" alt="">
                </div>
                <div >
                    <img src="twitter.png" alt="">
                </div>  
                <div >
                    <img src="adidas.png" alt="">
                </div>  
                <div >
                    <img src="xbox.png" alt="">
                </div>  
                <div >
                    <img src="youtube.png" alt="">
                </div>  
                <div >
                    <img src="microsoft.png" alt="">
                </div>    
            </div>
        </div>
    </div>

<!---------- brands ---------->

    <div >
        <div >
            <div >
                <div >
                    <h3>Download Our App</h3>
                    <p>Download app.</p>
                </div>
                <div >
                    <img src="logo.png" alt="">
                    <p>Download app.</p>
                </div>
                <div >
                    <h3>Useful Links</h3>
                    <ul>
                        <li>Coupons</li>
                        <li>Blogs</li>
                        <li>Return Policy</li>
                        <li>Join Affiliates</li>
                    </ul>
                </div>
                <div >
                    <h3>Follow Us</h3>
                    <ul>
                        <li>Facebook</li>
                        <li>Twiiter</li>
                        <li>Instagram</li>
                        <li>Youtube</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

I am very new to html/css coding and any help is really appreciated, also if there is an answer somewhere please direct me to it as i dont really know how to describe the problem.

CodePudding user response：

The spacing that your .footer doesn't fill with its black background color is defined as padding left and right for the .small-container element that happens to be the container of your elements including the footer as its last child.

To make your footer take the whole width, At first I tried changing this rule:

.small-container{
    max-width: 1080px;
    margin: auto;
    padding-left: 25px;
    padding-right: 25px;
}

To this by commenting the padding part:

.small-container{
    max-width: 1080px;
    margin: auto;
    /*
    padding-left: 25px;
    padding-right: 25px;
    */
}

But the side effect, was the padding was lacking in general.

So I restored the css rule above and just moved the footer element outside of that container. So that it doesn't get the padding but the rest of the document does.

*As a side note you were missing also a closing div at the end in your body. 

* {
  margin: 0;
  padding: 0%;
  box-sizing: border-box;
}

@font-face {
  font-family: "Sodo Sans";
  src: url("/fonts/sodo-sans-regular.woff2") format("woff2"), url("/fonts/sodo-sans-regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "Sodo Sans", sans-serif;
}

.navbar {
  display: flex;
  align-items: center;
  padding: 20px;
}

nav {
  flex: 1;
  text-align: right;
}

nav ul {
  display: inline-block;
  list-style-type: none;
}

nav ul li {
  display: inline-block;
  margin-right: 20px;
}

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

p {
  color: #555;
}

.container {
  max-width: 1300px;
  margin: auto;
  padding-left: 25px;
  padding-right: 25px;
}

.row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-around;
}

.col-2 {
  flex-basis: 50%;
  min-width: 300px;
}

.col-2 img {
  max-width: 100%;
  padding: 50px 0;
  width: 450px;
}

.col-2 h1 {
  font-size: 50px;
  line-height: 60px;
  margin: 25px 0;
}

.btn {
  display: inline-block;
  background: #069972;
  color: #fff;
  padding: 8px 30px;
  margin: 30px 0;
  border-radius: 30px;
  transition: 0.5s;
}

.btn:hover {
  background: inherit
}

.header {
  background: radial-gradient(#fff, #ffd6d6);
}

.header .row {
  margin-top: 70px;
}

.catagories {
  margin: 70px 0;
}

.col-3 {
  flex-basis: 30%;
  min-width: 250px;
  margin-bottom: 30px;
}

.col-3 img {
  width: 100%;
}

.small-container {
  max-width: 1080px;
  margin: auto;
  padding-left: 25px;
  padding-right: 25px;
}

.col-4 {
  flex-basis: 25%;
  padding: 10px;
  min-width: 200px;
  margin-bottom: 50px;
  position: relative;
  transition: 0.3s ease-in-out;
}

.col-4 img {
  width: 100%;
}

.title {
  text-align: center;
  margin: 0 auto 80px;
  position: relative;
  line-height: 60px;
  color: #555;
}

.title::after {
  content: '';
  background: #073eb6;
  width: 80px;
  height: 5px;
  border-radius: 5px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

h4 {
  color: #555;
  font-weight: normal;
}

.col-4 p {
  font-size: 14px;
}

.col-4:hover {
  top: 5px;
}


/*------------- offer -------------*/

.offer {
  background: radial-gradient(#fff, #ffd6d6);
  margin-top: 80px;
  padding: 30px 0;
}

.col-2 .offer-img {
  padding: 50px;
}

small {
  color: #555;
}


/*------------- testimonial -------------*/

.testimonial {
  padding-top: 100px;
}

.testimonial .col-3 {
  text-align: center;
  padding: 40px 20px;
  box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: 0.5s;
}

.testimonial .col-3 img {
  width: 50px;
  margin-top: 20px;
  border-radius: 50%;
}

.testimonial .col-3:hover {
  transform: translateY(-10px);
}

.fa.fa-quote-left {
  font-size: 34px;
  color: orange;
}

.col-3 p {
  font-size: 15px;
  margin: 12px 0;
  color: #777;
}

.testimonial .col-3 h3 {
  font-weight: 600;
  color: #000;
  font-size: 19px;
}


/*------------- brands -------------*/

.brands {
  margin: 100px auto;
}

.col-5 {
  width: 160px;
}

.col-5 img {
  width: 100%;
  cursor: pointer;
  filter: grayscale(100%);
  transition: 0.25s;
}

.col-5 img:hover {
  filter: grayscale(0);
}


/*------------- footer -------------*/

.footer {
  background: #000;
  color: #8a8a8a;
  font-size: 14px;
  padding: 60px 0 20px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Your Ecommerce Name.</title>
</head>

<body>

  <div >
    <div >
      <div >
        <div >
          <img src="logo.png" width="125px" alt="My logo">
        </div>
        <nav>
          <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Shop</a></li>
            <li><a href="">Contacts</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Account</a></li>
          </ul>
        </nav>
        <img src="cart.png" width="30px" height="30px" alt="">
      </div>
      <div >
        <div >
          <h1>Eccomerce</h1>
          <p>
            Ecommerce has become an increasingly popular way for businesses<br> and individuals to buy and sell goods and services online. With the <br> rise of the internet and advancements in technology, it is now easier<br> than ever to set up an online
            store and reach a global audience.<br> Ecommerce allows for a more convenient and cost-effective way to<br> conduct transactions, and has opened up new opportunities for <br> entrepreneurs and consumers alike.
          </p>

          <a href="" > Explore now! &#8594;</a>
        </div>

        <div >
          <img src="reference.png" alt="Your Reference photo.">
        </div>
      </div>
    </div>
  </div>
  <!---------- featured catagories ---------->
  <div >
    <div >
      <div >
        <div >
          <img src="catagory.png" alt="">
        </div>
        <div >
          <img src="catagory.png" alt="">
        </div>
        <div >
          <img src="catagory.png" alt="">
        </div>
      </div>
    </div>
  </div>
  <!---------- featured products ---------->
  <div >
    <h2 >Featured Products</h2>
    <div >
      <div >
        <img src="product.png" alt="">
        <h4>Product name</h4>
        <p>Price</p>
      </div>
      <div >
        <img src="product.png" alt="">
        <h4>Product name</h4>
        <p>Price</p>
      </div>
      <div >
        <img src="product.png" alt="">
        <h4>Product name</h4>
        <p>Price</p>
      </div>
      <div >
        <img src="product.png" alt="">
        <h4>Product name</h4>
        <p>Price</p>
      </div>

    </div>
    <h2 > Latest Products</h2>
    <div >
      <div >
        <img src="product.png" alt="">
        <h4>Product name</h4>
        <p>Price</p>
      </div>
      <div >
        <img src="product.png" alt="">
        <h4>Product name</h4>
        <p>Price</p>
      </div>
      <div >
        <img src="product.png" alt="">
        <h4>Product name</h4>
        <p>Price</p>
      </div>
      <div >
        <img src="product.png" alt="">
        <h4>Product name</h4>
        <p>Price</p>
      </div>
    </div>
    <div >
      <div >
        <img src="product.png" alt="">
        <h4>Product name</h4>
        <p>Price</p>
      </div>
      <div >
        <img src="product.png" alt="">
        <h4>Product name</h4>
        <p>Price</p>
      </div>
      <div >
        <img src="product.png" alt="">
        <h4>Product name</h4>
        <p>Price</p>
      </div>
      <div >
        <img src="product.png" alt="">
        <h4>Product name</h4>
        <p>Price</p>
      </div>
    </div>
    <!---------- offers ---------->
    <div >
      <div >
        <div >
          <div >
            <img src="product.png"  alt="">
          </div>
          <div >
            <p>Special Offer!</p>
            <h1>Product</h1>
            <small>Information about product<br></small>
            <a href="" >Buy Now! &#8594</a>
          </div>
        </div>
      </div>
    </div>

    <!---------- testimonial ---------->
    <div >
      <div >
        <div >
          <div >
            <i ></i>
            <p>Blah Blah Blah</p>

            <div >
              <i ></i>
              <i ></i>
              <i ></i>
              <i ></i>
              <i ></i>
            </div>

            <img src="person1.jpg" alt="">
            <h3>Rachel Gardener</h3>
          </div>
          <div >
            <i ></i>
            <p>Blah Blah Blah</p>

            <div >
              <i ></i>
              <i ></i>
              <i ></i>
              <i ></i>
              <i ></i>
            </div>
            <img src="person2.jpg" alt="">
            <h3>Micheal Grove</h3>
          </div>
          <div >
            <i ></i>
            <p>Blah Blah Blah</p>

            <div >
              <i ></i>
              <i ></i>
              <i ></i>
              <i ></i>
              <i ></i>
            </div>

            <img src="person3.jpg" alt="">
            <h3>Orion Maxwell</h3>
          </div>
        </div>
      </div>
    </div>

    <!---------- brands ---------->
    <div >
      <div >
        <div >
          <div >
            <img src="spotify.png" alt="">
          </div>
          <div >
            <img src="twitter.png" alt="">
          </div>
          <div >
            <img src="adidas.png" alt="">
          </div>
          <div >
            <img src="xbox.png" alt="">
          </div>
          <div >
            <img src="youtube.png" alt="">
          </div>
          <div >
            <img src="microsoft.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <!---------- brands ---------->
  </div>

  <div >
    <div >
      <div >
        <div >
          <h3>Download Our App</h3>
          <p>Download app.</p>
        </div>
        <div >
          <img src="logo.png" alt="">
          <p>Download app.</p>
        </div>
        <div >
          <h3>Useful Links</h3>
          <ul>
            <li>Coupons</li>
            <li>Blogs</li>
            <li>Return Policy</li>
            <li>Join Affiliates</li>
          </ul>
        </div>
        <div >
          <h3>Follow Us</h3>
          <ul>
            <li>Facebook</li>
            <li>Twiiter</li>
            <li>Instagram</li>
            <li>Youtube</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Page link：https//www.codepudding.com/net/638392.html

Prev:After pushing footer to the bottom of the page using flex, container works no longer
Next:Input box placeholder/label animations
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding