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

Robert Rydlewski
Robert Rydlewski
3,826 Points

why the nav is not center as the code in the video :(

I have fallowed easy step to create max width of navbar and footer but for some reason, my text in the navbar is not aligned with the text I below as in the video.

I would have to make extra changes by myself adding extra code and make the code more complex... :( I wanna have the same result as the author of the video even though the code looks exactly the same .. I can't find the issue

Robert Rydlewski
Robert Rydlewski
3,826 Points

<!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>&copy;2015 Residents of The Best City Ever.</span>
  </footer>

</body> </html>

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

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

h1 { margin-top: 0; }

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

1 Answer

G N
G N
10,206 Points

I see a syntax error on line two:

<div class"container">

should be:

<div class="container">
Robert Rydlewski
Robert Rydlewski
3,826 Points

OMG!!!! I am so embarrassed 😩 Thanks a lot. I appreciate it. Happy coding