CSS CSS Layout Basics Getting Started with CSS Layout Centering Page Content and Creating a Full-width Header

Manuel Alejandro Matus de Quevedo
Manuel Alejandro Matus de Quevedo
Pro Student 6,407 Points

I'm not getting a full width footer

Even though I followed along this video, I'm not getting the full width footer, and I don't know why. Please help me to verify what I'm doing wrong. Thanks in advance!

Here is my code:

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Manu de Quevedo</title> <link rel="stylesheet" type="text/css" href="css/normalize.css"> <link rel="stylesheet" href=" css/style.css"> </head> <body> <header class="main-header"> <div class="container"> <h1 class="name"><a href="index.html">Manu de Quevedo</a></h1> <ul class="main-nav"> <li><a href="#">About me</a></li> <li><a href="#">Services</a></li> <li><a href="#">Porfolio</a></li> <li><a href="#">Contact me</a></li> </ul> </div> </header>

<div class="container">
    <p>Everything in this city is worth waiting in line for.</p>
    <p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
    <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>

    <h2>Great food</h2>
    <p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum. Marzipan toffee drag&#233;e chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>

<footer class="main-footer">
    <p>&copy;2015 Manu de Quevedo Todos los Derechos Reservados.</p>

</body> </html>

And here is the CSS:

/* ================================= Base Element Styles ==================================== */

body { line-height: 1.6; color: #3a3a3a; }

a { color: #fff; text-decoration: none; }

/* ================================= Base Layout Styles ==================================== */

/* ---- Navigation ---- */

.name { margin: 0; }

/* ---- Layout Containers ---- */

.container { width: 70%; margin: 0 auto; }

.main-header { background: #3acec2; padding: 1em 0; }

.main-footer { text-align: center; padding: 2em 0; background: #d9e4ea; } /* ---- Page Elements ---- */

/* Lists ========================================================================== */


  • Remove default list styles, margins and padding. */

ol, ul { margin: 0; padding: 0; list-style-type: none; }

3 Answers

Tobias Mahnert
Tobias Mahnert
89,413 Points

did you tried margin-bottom: 0px; on your footer element and min-width: 100% ?