CSS: background-color is not being applied in the whole div

Hey there! My first post here, I’m not used to the platform. I apologize in advance if I miss anything important.

Anyways, I’m working on a project for my portfolio (my first!!) and I am currently working on the footer. The problem is: the background-color is not applied entirely in the footer. Elements like the form I added is using the background I set on the * selector. I tried a lot of things and nothing worked.

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sunglass Brand</title>
    <link rel="stylesheet" href="sheet.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@600&family=Outfit:wght@100..900&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <a class="logo" href="/">Sunglasses Brand</a>
        <nav>
            <ul class="navlist">
                <li><a href="/">home</a></li>
                <li><a href="#about">about</a></li>
                <li><a href="#glasses">collection</a></li>
                <li><a href="contact.html">contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div id="header">
            <img src="fotoheader.png">
        </div>
        <div class="ribbon"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus consequat arcu quis sem pulvinar gravida.</span>
        </div>
        <div class="container">
            <h1>SUNGLASSESS BRAND</h1>
        </div>
        <div class="container">
        <div class="about">
            <p>At our sunglasses brand, the sun never sets on style. By blending the highest quality materials with innovative design, our sunglasses not only shield your eyes from UV rays but also elevate your look to new heights of elegance and sophistication. From beachside to cityscape, from dawn till dusk, our sunglasses are more than just an accessory—they're a statement of timeless style and unmatched confidence.</p>
        </div>
        </div>
        <div class="container2" id="glasses">
            <p class="title">check out our collection:</p>
        </div>
        <div class="main_container">
            <img src="foto1.png">
            <img src="foto2.png">
            <img src="foto3.png">
            <img src="foto4.png">
            <img src="foto5.png">
            <img src="foto6.png">
            <img src="foto7.png">
        </div>
    </main>
    <div class="main_container">
        <div class="title2" id="about">
            <p>
                about our brand
            </p>
        </div>
        <div class="about2">
            <p>
                We are passionate creators at the forefront of fashion, dedicated to crafting sunglasses that transcend trends and embody individuality. With a commitment to excellence and a relentless pursuit of innovation, we strive to redefine what it means to accessorize with sunglasses. Our journey is driven by a deep-rooted desire to inspire confidence and empower self-expression in every wearer. From our inception, we've embraced the ethos of authenticity, sustainability, and inclusivity, ensuring that our brand resonates with people from all walks of life. Welcome to our world, where every pair of sunglasses tells a unique story of style, adventure, and endless possibilities.
            </p>
        </div>
    </div>
    <div class="main_container">
        <div class="stores">
            <div class="stores_title">store 1:</div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit cursus urna, vel consequat metus.
            </p>
        </div>
        <div class="stores">
            <div class="stores_title">store 2:</div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit cursus urna, vel consequat metus.
            </p>
        </div>
        <div class="stores">
            <div class="stores_title">store 3:</div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit cursus urna, vel consequat metus.
            </p>
        </div>
        <div class="title">
            <p>
                where you can
            </p>
            <p>
               find your pair
            </p>
        </div>
    </div>
    <footer>
        <div class="main_container">
            <p>Webdesign project by Bianca Louise Wagner. This is not a real store. There are no items/products being sold. Project made specifically to be added to the portfolio. <br>© Copyright 2024</p>
        <form>
            <div class="form_title">get in touch:</div>
            <div>
                <label for="name" class="form_label">Name:</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div>
                <label for="email" class="form_label">Email:</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div>
                <label for="message" class="form_label">Message:</label>
                <textarea id="message" name="message" rows="4" required></textarea>
            </div>
            <button type="submit">Send</button>
        </form>
        </div>
    </footer>
    </body>
</html>
* {
    background-color: #F2F1DD;
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}

::selection {
    background-color: #009576;
    color: white;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 40px;
}

a {
    text-decoration: none;
}

nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 6vh;
    padding: 10px;
    width: 100%;
}

.logo {
    color: #009576;
    font-size: 40px;        
    line-height: normal;
    text-transform: uppercase;
    width: 100%;
    font-family: "Oswald", sans-serif;;
    font-style: normal;
    font-weight: 600; 
}

.navlist {
    list-style: none;
    display: flex;
}

.navlist li {
    color: #FF79CD;
    font-size: 27px;
    font-family: Lora;
    font-weight: 700;
    display: inline-block;
    margin-left:20px;
}

li a {
    color: #FF79CD;
}

a:visited, a:active {
    text-decoration: none;
    color: none;
}

li a {
    color: #FF79CD;
}

a:visited, a:active {
    text-decoration: none;
    color: none;
}

#header {
    width: 100%;
    position: relative;
    margin-bottom: 0;
}

#header img {
    background-image: url(fotoheader.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
    width: 100%;
    background-position: center;
}

.ribbon {
    display: flex;
    width: 100%;
    height: 30px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #FF79CD;
    position: relative;
    margin-top: -5px;
    margin-bottom: 70px;
}

.ribbon span {
    color: #FFF;
    text-align: center;
    font-family: Outfit;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: lowercase;
    background-color: #FF79CD;
}

.main_container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
    height: auto;
    position: relative;
    align-content: center;
    height: auto;
    align-items: center;
    margin-bottom: 70px;
}

.main_container img {
    background-repeat: no-repeat;
    background-size: cover;
    max-width:170px;
    max-height:230px;
    width: auto;
    height: auto;
    margin-right: 5px;
    transition-duration: 0.7s;
    border: 3px solid #83B6B2;
}

.collection:hover img {
    filter: grayscale(100%);
}

.collection img:not(:hover) {
    filter: grayscale(0%);
}

.container {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 70px;
}

.container2 {
    display: flex;
    width: 100%;
    height: 80px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 10px;
    margin-bottom: 70px;
}

h1 {
    color: #009576;
    text-align: center;
    font-family: "Oswald", sans-serif;
    font-style: normal;
    font-weight: 600; 
    font-size: 65px;
    line-height: normal;
}

.title {
    color: #FF79CD;
    text-align: center;
    font-family: "Oswald", sans-serif;
    font-style: normal;
    font-weight: 600; 
    font-size: 50px;
    line-height: normal;
}

.title2 {
    color: #009576;
    text-align: center;
    font-size: 50px;
    font-family: "Oswald", sans-serif;
    font-style: normal;
    font-weight: 600; 
    line-height: normal;
}

.about {
    display: flex;
    flex-direction: column;
    width: 65%;
    height: auto;
}

.about p {
    color: #6A6A6A;
    font-family: Outfit;
    font-size: 19px;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    line-height: 2;
}

.about2 {
    display: flex;
    flex-direction: column;
    width: 65%;
}

.about2 p {
    color: #6A6A6A;
    font-family: Outfit;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    text-align: right;
    line-height: 1.7;
}

.stores {
    display: flex;
    flex-direction: column;
    max-width: 300px;
    margin-bottom: 70px;
}

.stores p {
    color: #6A6A6A;
    font-family: Outfit;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: left;
    line-height: 1.5;
}

.stores_title {
    color: #FF79CD;
    font-family: Outfit;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

input {
    padding: 5px;
    margin: 10px 0;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.06);
    font-family: Outfit, sans-serif;
    font-size: 15px;
    border: 2px solid #83B6B2;
    transition: .3s border-color;
    display: block;
    color: #6A6A6A;
    border-radius: 5px;
}

input:hover, textarea:hover {
    border: 2px solid #009576;
}

input:focus, textarea:focus {
    outline: none;
}

textarea {
    width:100%;
    resize: vertical;
    padding: 5px;
    margin: 10px 0;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.06);
    max-height: 80px;
    font-family: Outfit, sans-serif;
    font-size: 15px;
    border: 2px solid #83B6B2;
    transition: .3s border-color;
    color: #6A6A6A;
    border-radius: 5px;
    max-width: 400px;
    display: block;
  }

.form_label {
    color: #6A6A6A;
    font-family: Outfit;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    text-align: right;
    line-height: 1.7;
    letter-spacing: 1.2;
}

button {
    min-width: 70px;
    height: 30px;
    color: #fff;
    font-family: Outfit;
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    outline: none;
    border-radius: 5px;
    border: none;
    background: #83B6B2;
    margin-top: 10px;
    float: right;
}

button:hover {
    background-color: #009576;
}

button:active {
    top: 2px;
}

.form_title {
    color: #009576;
    text-align: center;
    font-size: 35px;
    font-family: "Oswald", sans-serif;
    font-style: normal;
    font-weight: 600; 
    line-height: normal;
    margin-bottom: 10px;
}

footer .main_container {
    background-color: #ffc1e8;
    overflow: hidden;
}

footer .main_container p {
    color: #6A6A6A;
    font-family: Outfit;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    line-height: 1.7;
}

Welcome to Ask @BiancaWagner!

You can fix this by adding to your CSS:

.divyouwant * {
  background:whatever background you want;
}
4 Likes

Thank you so much! It worked!!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.