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;
}