Tell us what’s happening:
I need help for my code for this is always saying there is an issue with style.css anyone could help me with my code.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Awesome Music Fest</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="https://cdn.freecodecamp.org/curriculum/labs/event.jpg" alt="Music Fest Image">
<h1>Summer Music Festival</h1>
</header>
<main>
<section>
<h2>Amazing Lineup</h2>
<p>Get ready for an incredible lineup of talented artists spanning various genres! From rock legends to rising stars, we've got something for everyone.</p>
<ul>
<li>Headliner 1</li>
<li>Headliner 2</li>
<li>Supporting Act 1</li>
<li>And many more!</li>
</ul>
</section>
<hr>
<section>
<h2>Delicious Food & Drinks</h2>
<p>Fuel your festival experience with a wide array of food vendors offering mouthwatering delights. Quench your thirst with refreshing beverages.</p>
<p>Enjoy everything from gourmet food trucks to classic festival fare.</p>
</section>
<hr>
<section>
<h2>Get Your Tickets Now!</h2>
<p>Don't miss out on the music event of the summer! Secure your tickets today before they sell out.</p>
<a href="#" class="ticket-link">Buy Tickets</a>
</section>
</main>
</body>
</html>
/* file: styles.css */
body {
box-sizing: border-box; /* Important for predictable sizing */
font-family: sans-serif; /* Or your preferred font */
margin: 0 auto; /* Top/bottom margin 0, left/right margin auto */
min-height: calc(100vh - 100px); /* 100vh - (2 * 50px padding) */
padding: 50px; /* 50px top and bottom padding */
text-align: center; /* Center text within the body */
width: 90vw; /* Width relative to viewport width */
}
header {
margin-bottom: 20px;
text-align: center;
}
header img {
display: block;
height: auto;
margin: 0 auto;
max-width: 100%;
}
h1 {
margin-top: 10px;
}
hr {
border: 1px solid #ccc;
box-sizing: border-box;
margin: 30px auto;
width: 70%;
}
main {
text-align: left;
}
section {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
box-sizing: border-box;
margin: 20px auto;
padding: 20px;
width: 80%;
}
h2 {
margin-bottom: 10px;
text-align: center;
}
ul {
list-style-type: disc;
padding-left: 20px;
}
.ticket-link {
background-color: #007bff;
border-radius: 5px;
color: white;
display: inline-block;
margin-top: 20px;
padding: 10px 20px;
text-decoration: none;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36
Challenge Information:
Build an Event Flyer Page - Build an Event Flyer Page