CSS CSS Layout Basics Getting Started with CSS Layout Using a Mobile First Approach

my code dont align to the centre. why?

this is the html.

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Best City Guide</title> <link rel="stylesheet" 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="#">Best City Guide</a></h1>
    <ul class="main-nav">
        <li><a href="#">ice cream</a></li>
        <li><a href="#">donuts</a></li>
        <li><a href="#">tea</a></li>
        <li><a href="#">coffee</a></li>
    </ul>
</div>
</header>
<div class="container">
<h2>Welcome!</h2>

<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>

</div> <footer class="main-footer"> <span>©2015 Residents of The Best City Ever.</span> </footer>

</body> </html>

and this is the style sheet.

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

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

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

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

/**************************************** Nav =====================================*/

.name { margin: 0; } /* ---- Layout Containers ---- */

.container{ padding-left: 1em; padding-right: 1em; } .main-header { background: #3acec2; padding: 1em 0; text-align:: center; }

.main-footer { text-align: center; padding: 2em 0; background: #d9e4ea;

}

/* ---- Page Elements ---- / / ================================= Media queries ==================================== */

@media (min-width: 769px;){

.container{ max-width: 1000px; width: 70%; margin: 0 auto; } }

Sorry about so much code!!! I'm lost! Surely the problem would be in the style sheet not reading my text-align?

1 Answer

Simply change this line

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

with this

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

you wrote double (:) here text-align:: center;