CSS width issue

Hello, I have been working on this here project and I have run into an issue. The colored blocks behind my h2 elements don’t seem to span all the way across the screen. Does anyone know why this might be? Code is pasted below, any recommendations would be greatly appreciated!

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Dasmoto's Arts & Crafts</title>
        <link href="./resources/css/index.css" rel="stylesheet">
    </head>
    <body>
        <header>
            <h1>Dasmoto's Arts & Crafts</h1>
        </header>
        <div class="content">
            <h2 id="brush">Brushes</h2>
            <img src="https://content.codecademy.com/courses/freelance-1/unit-2/hacksaw.jpeg?_gl=1*kav08e*_ga*NDM4NjIxODgxNC4xNjc5MjY3NTIy*_ga_3LRZM6TM9L*MTY3OTY2MjQ5Mi4xNy4xLjE2Nzk2NjQyMDEuMzMuMC4w" alt="">
            <h3>Hacksaw Brushes</h3>
            <p>Made of the highest quality oak, Hacksaw brushes are known for their weight and ability to hold paint in large amounts. Available in different sizes. <span>Starting at $3.00 / brush.</span></p>

            <h2 id="frame">Frames</h2>
            <img src="https://content.codecademy.com/courses/freelance-1/unit-2/frames.jpeg?_gl=1*g1bl6j*_ga*NDM4NjIxODgxNC4xNjc5MjY3NTIy*_ga_3LRZM6TM9L*MTY3OTY2MjQ5Mi4xNy4xLjE2Nzk2NjQyMDEuMzMuMC4w" alt="">
            <h3>Art Frames (assorted)</h3>
            <p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs. <span>Starting at $2.00 / frame.</span></p>

            <h2 id="paint">Paint</h2>
            <img src="https://content.codecademy.com/courses/freelance-1/unit-2/finnish.jpeg?_gl=1*g1bl6j*_ga*NDM4NjIxODgxNC4xNjc5MjY3NTIy*_ga_3LRZM6TM9L*MTY3OTY2MjQ5Mi4xNy4xLjE2Nzk2NjQyMDEuMzMuMC4w" alt="">
            <h3>Clean Finnish Paint</h3>
            <p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork. <span>Starting at $5.00 / tube.</span></p>

        </div>
    </body>
</html>

CSS:

* {
    box-sizing: border-box;
    font-family: 'Times New Roman';
    background-color: #FFFFFF;
    position: relative;
}

header {
    text-align: center;
    font-size: 60px;
    color: #F0E68C;
    margin: 80px 0;
    width: 100%;
    display: inline-block;
    background-image: url(https://content.codecademy.com/courses/freelance-1/unit-2/pattern.jpeg?_gl=1*1qns8ks*_ga*NDM4NjIxODgxNC4xNjc5MjY3NTIy*_ga_3LRZM6TM9L*MTY3OTY2MjQ5Mi4xNy4xLjE2Nzk2NjQyMDEuMzMuMC4w);
}

div {
    position: absolute;
}

h1 {
    background: transparent;
    margin: 10px;
}

h2 {
    width: 100%;
    color: #FFFFFF;
}

h3 {
    font-size: 20px;
}

p {
    font-size: 18px;
}

span {
    color: blue;
    font-weight: bold;
}

#brush {
    background-color: aquamarine;
}

#frame {
    background-color: #F08080;
}

#paint {
    background-color: #87CEEB;
}

Hello, there!

Here, you have your .content div set to absolute. When an element is set to absolute, it is not only removed from the flow of a the document but its width and height are set to “compress” to whatever its contents are. If you look at your <h2> elements, they are the same length as the “Clean Finnish Paint” <p>, which is the longest element within the .container.

When looking at each project, it is best to find the simplest solution. This will make it easier to maintain and deduce problems when they occur.

1 Like