Tell us what’s happening:
Hello!
Test 16 and Test 17 tells me to set the width of my hr and section elements to a percentage value which I already did. You can see this at the bottom of my CSS code as the last two CSS Rules.
Please help for I have been reading for at least an hour fixing this issue. Thank you!
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Event Flyer Page</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Coding With Jiro" />
<meta name="description"
content="This website showcases the authors abilities to design an event flyer page using HTML and CSS." />
<link rel="stylesheet" href="./styles.css" />
<meta property="og:title" content="Event Flyer Page" />
<meta property="og:type" content="website" />
</head>
<body>
<header class="header">
<img src="https://ca-times.brightspotcdn.com/dims4/default/96271e3/2147483647/strip/true/crop/6000x3999+0+1/resize/2000x1333!/quality/75/?url=https%3A%2F%2Fcalifornia-times-brightspot.s3.amazonaws.com%2Fad%2F85%2F25872d8a4d4db3c68d4e3252dbe1%2F1502000-et-coachella-day-one-4089.jpg"
alt="Attendees enjoying their time during Coachella Festival" class="header__img" width="2000"
height="1333">
<h1 class="header__h1">Coachella Music Festival</h1>
<h2 class="header__h2"><span class="nowrap">April 10-12 &</span> <span class="nowrap">April 17-19,
2026</span></h2>
</header>
<hr class="hr">
<main class="main">
<section class="main__section">
<h2 class="main__h2">Activities Tent</h2>
<img class="main__img"
src="https://media.coachella.com/content/filtered_tile_images/640/JtKlzKnnungCjVLE8nbclqU6prCBm7JnMXhgMcr3.png"
alt="Activity Tent in Coachella." width="425" height="425">
<p class="main__p">
In the heart of camping you can run a relay, enter a lip sync challenge, cool off with a water
balloon
game or play some pickleball. Leave with core camping memories and possibly a VIP upgrade. Connect
with
people you never thought you'd meet. DJ's playing all day and night. Come play with us.
</p>
</section>
<section class="main__section">
<h2 class="main__h2">Breaking Bread</h2>
<img class="main__img"
src="https://media.coachella.com/content/filtered_tile_images/640/uKGclHobSuYUgGD9XRqa6gO8nf8XhuVKmOhxH0Pm.jpg"
alt="People socializing during our Breaking Bread event." width="1200" height="1200">
<p class="main__p">
Join Treetop Journey for a Breaking Bread moment. A time to come together, share a meal and connect
with fellow campers. It's an opportunity to slow down, soak in the sunshine and make a new friend. Bring
some snacks and the beautifully designed communal tables, open to all campers, located in front of
the food trucks in Lot 8 on Sunday, Time TBD.
</p>
</section>
<section class="main__section">
<h2 class="main__h2">Camping Lounge</h2>
<img class="main__img"
src="https://media.coachella.com/content/filtered_tile_images/640/MKwrMzZmc2FhAYUsUsKDC1uePovhpvIfxAkTz8Z0.jpg"
alt="Attendees chilling in our camping lounge." width="425" height="425">
<p class="main__p">
Come chill with us. Hop into a hammock, soak up some shade, and just relax. Whether you’re working on
your laptop, catching up with friends to review set times, or just taking a nap, this is the spot to
unwind. Get ready for a long night or wind down after the show. Come take it easy, this is a safe place.
</p>
</section>
<section class="main__section">
<h2 class="main__h2">Coachella Art Studios</h2>
<img class="main__img"
src="https://media.coachella.com/content/filtered_tile_images/640/0VezbT0glaKPTUYwCrjcppiUNvmrDoKEEIj0lYIX.png"
alt="People crafting their art while socializing." width="425" height="425">
<p class="main__p">
Lets connect over free arts & crafts! Here is where free sustainable fashion, beads and jars of jewelry
are in abundance for you to upcycle and elevate your look. Collage your Coachella mood-board or make a
cute keychain with clay. These types of crafts, and so many more, are all free - you just have to make
it to take it.
</p>
</section>
<section class="main__section">
<h2 class="main__h2">Coachella Shopping</h2>
<img class="main__img"
src="https://media.coachella.com/content/filtered_tile_images/640/ajToBVAIorGADrbBYSbrJWIJ7zJVDCi9ps1Fktcw.png"
alt="The Coachella Store." width="425" height="425">
<p class="main__p">
The Coachella Store will include brand new Coachella 2025 merchandise, daily drops featuring
limited-edition capsule collections by Juliet Johnstone (Friday), Advisory Board Crystals (Saturday) and
Alfonso Gonzalez Jr (Sunday), and exclusive GV Black Coachella collabs with Henock “HK” Sileshi, Jordan
Bentley, STUDIO Powered by SUPERVSN, Uma Leoni of Leoni's Studio, Tombogo and Uprisers.
</p>
</section>
</main>
<hr class="hr">
<footer class="footer">
<p class="footer__p">© <time datetime="2026">2026</time> Coachella Valley Music and Arts Festival</p>
</footer>
</body>
</html>
/* file: styles.css */
/* || IMPORT GOOGLE FONT LINKS */
@import url("https://fonts.googleapis.com/css2?family=Fugaz+One&family=Jacques+Francois+Shadow&family=Joan&family=Lexend+Deca:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
/* || RESET */
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
display: block;
max-width: 100%;
height: auto;
}
input,
button,
textarea {
font: inherit;
}
/* || VARIABLES */
/* CHANGE THE DATA BELOW AS NEEDED */
:root {
/* FONTS */
--FF: "Nunito", sans-serif;
--FS: clamp(1.25rem, 2.2vh, 1.75rem);
/* COLORS */
--BGCOLOR: #ffc6b2;
--BGCOLOR-FADE1: #ffd3c1;
--BGCOLOR-FADE2: #fff1de;
--BGCOLOR-FADE3: #fff5e4;
--BG-IMAGE: linear-gradient(
45deg,
var(--BGCOLOR),
var(--BGCOLOR-FADE1),
var(--BGCOLOR-FADE2),
var(--BGCOLOR-FADE3)
);
--BGCOLOR-SECTION: #faf2e4;
--BORDER-COLOR: #582d41;
--FONT-COLOR: #582d41;
--FONT-COLOR-ALT: #000;
/* BORDERS */
--BORDERS: 2px solid var(--BORDER-COLOR);
/* SHADOWS */
--BOX-SHADOW: 0px 3px 5px rgba(0, 0, 0, 0.3);
/* PADDINGS */
--PADDING-TB-TEXT: 0.25em;
--PADDING-SIDE-TEXT: 2.5%;
--PADDING-TB-BODY: 50px;
/* MARGINS */
--MARGIN-TEXT: clamp(1em, 2.5vh, 1.5em) 0;
--MARGIN-HEADER: 0.25em;
--MARGIN-BODY: 0 auto;
}
/* || UTILITY CLASSES */
.offscreen {
position: absolute;
left: -10000px;
}
.nowrap {
white-space: nowrap;
}
.center {
text-align: center;
}
/* || GENERAL STYLES */
html {
scroll-behavior: smooth;
font-size: var(--FS);
font-family: var(--FF);
background-color: var(--BGCOLOR);
background-image: var(--BG-IMAGE);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
body {
color: var(--FONT-COLOR);
padding-top: 50px;
padding-bottom: 50px;
min-height: calc(100vh - 100px);
width: 80vw;
margin: 0 auto;
}
p {
line-height: 1.5;
}
/* || HEADER */
.header {
text-align: center;
}
.header__img {
margin: auto;
width: 50vw;
min-width: 300px;
border-radius: 100px;
opacity: 0.8;
transition: all 0.6s ease-in-out;
}
.header__img:hover {
opacity: 1;
box-shadow: var(--BOX-SHADOW);
}
.header__h1,
.header__h2 {
text-transform: uppercase;
margin: var(--MARGIN-HEADER);
text-align: center;
}
.header__h1 {
font-weight: 800;
}
.header__h2 {
color: var(--FONT-COLOR-ALT);
margin-top: 0.5rem;
}
/* || FOOTER */
.footer {
text-align: center;
}
.footer__p {
color: var(--FONT-COLOR-ALT);
margin: var(--MARGIN-TEXT);
padding: var(--PADDING-TB-TEXT) var(--PADDING-SIDE-TEXT);
font-weight: bold;
}
/* || MAIN */
.main {
width: 100%;
}
.main__h2 {
text-align: center;
margin: var(--MARGIN-TEXT);
margin-top: 0.5rem;
font-weight: bold;
font-size: 1.75em;
}
.main__img {
width: 40%;
min-width: 225px;
margin: auto;
margin-bottom: 20px;
border-radius: 20px;
border: var(--BORDERS);
}
.main__p {
color: var(--FONT-COLOR-ALT);
padding: var(--PADDING-TB-TEXT) var(--PADDING-SIDE-TEXT);
margin: var(--MARGIN-TEXT);
background-color: var(--BGCOLOR-FADE2);
box-shadow: var(--BOX-SHADOW);
width: 75%;
min-width: 225px;
margin: auto;
}
hr {
width: 75%;
margin: auto;
background-color: var(--BORDER-COLOR);
border-color: var(--BORDER-COLOR);
border-radius: 10px;
}
section {
width: 90%;
background-color: var(--BGCOLOR-SECTION);
box-shadow: var(--BOX-SHADOW);
padding: 1.5rem;
margin: 1.5rem auto;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36
Challenge Information:
Build an Event Flyer Page - Build an Event Flyer Page
