0

Why is my header inline and not block?

<body> <header> <div class="container"> <h1>Awesome App</h1> <h2>This app will change your life!</h2> <a class="btn">Download Now</a> </div> <div class="submenu"> <a href="#">Link 1</a> <a href="#">Link 2</a> </div> </header> ----------------------------------------------------------------------------------------- html { font-size: 16px; } header { color: #FFFFFF; background-color: #284b63; padding: 80px 0; text-align: center; } section { padding: 40px 0; text-align: center; } .features { background: #FFFFFF; color: #000000; } .quote { background: #549DA0; color: #FFFFFF; } footer { background: #353535; padding: 32px 0; text-align: center; color: #868686 } h1 { font-size: 3rem; margin: 0 0 16px 0; } h2 { font-weight: 300; font-size: 1.5rem; margin: 0 0 16px 0; } .container { margin: auto; padding: 0 20px 0 20px; max-width: 900px; display: flex; } .btn { display: inline-block; color: white; font-weight: 500; font-size: 1.25rem; background: #549DA0; border: none; border-radius: 5px; padding: 12px 16px; cursor: pointer; } .btn:hover { background: #468486 } blockquote { margin: 0; padding: 0; text-align: center; } blockquote p { margin: 0 0 5px 0; font-size: 24px; } blockquote cite { font-size: 16px; font-style: italic; } blockquote cite:before { content: '-'; margin-right: 5px; } footer { background: #353535; padding: 32px 0; text-align: center; color: #868686; font-size: 12px; } footer ul { margin: 0; padding: 0; list-style: none; } footer li { display: inline-block; } footer li a { padding: 6px; font-size: 14px; text-decoration: none; color: #c3c3c3; } footer li a:hover { color: white; } .feature { width: 100%; display: flex; align-items: center; justify-content: center; text-align: left; margin: 0 0 10px 0; font-size: 16px; } .feature img { width: 15%; min-widt

25th Dec 2021, 8:52 PM
GMcLDev
4 Respuestas
+ 1
remove display: flex .container { margin: auto; padding: 0 20px 0 20px; max-width: 900px; display: flex; /* remove it */ }
26th Dec 2021, 12:43 AM
SoloProg
SoloProg - avatar
+ 1
The course wants us to set it to flex so the features section can expand. If I set it to block, the features section doesn't align correctly. I've been trying to fix it for hours, but no luck. Just going to go through the CSS course and flexbox tutorial, then come back to it I guess
26th Dec 2021, 1:18 AM
GMcLDev
+ 1
Use this instead, display: flexbox;
26th Dec 2021, 1:45 AM
SoloProg
SoloProg - avatar
0
flexbox isn't a parameter unfortunately
26th Dec 2021, 5:29 AM
GMcLDev