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
Often have questions like this?
Learn more efficiently, for free:
