Nav and #logo don't line up like in the video

Question

Hello, I was wondering if anyone would be able to help me.

In Nick's video (around the 04:40 mark) in his responsive.css he floats the #logo to the left and the nav to the right and they end up aligned with each other and both elements quite centred vertically.

However, when I use the same widths, margins, paddings etc, my nav bar floats to the right but also moves below the #logo. If I reduce the widths then my nav bar goes to the top of the page above the logo. So, in other words, my nav and #logo aren't lining up like they do in the video.

Anyone out there who can see where I'm going wrong?

Thanks in advance! :)

My html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Frances Massie</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Amaranth|Playfair+Display+SC:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Frances Massie</h1>
        <h2>Web Developer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact Me</a></li> 
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/beach1.jpg">
            <img src="img/beach1.jpg" alt="beach" class="homephoto">
            <p>Photo of a Beach</p>
            </a>
          </li>
          <li>
            <a href="img/desert1.jpg">
            <img src="img/desert1.jpg" alt="desert" class="homephoto">
            <p>Photo of a Desert</p>
            </a>
          </li>
          <li>
            <a href="img/iceberg1.jpg">
            <img src="img/iceberg1.jpg" alt="iceberg" class="homephoto">
            <p>Photo of an Iceberg</p>
            </a>
          </li>
          <li>
            <a href="img/tree1.jpg">
            <img src="img/tree1.jpg" alt="tree" class="homephoto">
            <p>Photo of a Tree</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://www.facebook.com"><img src="img/facebook.png" alt="facebookicon" class="socialicon"></a>
        <a href="http://www.twitter.com"><img src="img/twitter.png" alt="twittericon" class="socialicon"></a>
        <a href="http://www.linkedin.com" class="linkedin"><img src="img/linkedin1.png" alt="linkedinicon" class="socialicon"></a>
        <p>&copy; 2016 Frances Massie</p>
      </footer>
    </div>

  </body>


</html>

My main.css:

/**************************
GENERAL
**************************/

body {
  font-family:'Amaranth', sans-serif;
}


#wrapper {
  max-width:500px;
  margin:0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
  color:gold;
}

img {
  max-width:100%;
}

h3 {
  margin:0 0 1em 0;
}



/**************************
HEADING
**************************/


header{
  float:left;
  margin:0px 0 30px 0;
  padding:5px 0 0 0;
  width:100%;
}



#logo {
  text-align:center;
  margin:0 auto;
}


h1 {
  font-family:'Playfair Display SC', serif;
  margin: 15px 0 0;
  font-size:1.75em;
  font-weight:normal;
  line-height:0.8em;
}

h2 {
  font-family:'Playfair Display SC', serif;
  font-size:0.75em;
  margin:5px 0 0px;
  font-weight:normal;
}



/**************************
NAVIGATION
**************************/

nav {
  font-family:'Playfair Display SC', serif;
  text-align:center;
  padding:10px 0;
  margin:20px 0 0;
  width:100%;

}

nav ul{
  list-style:none;
  margin:0 10px;
  padding:0;

}

nav li {
  display:inline-block;
}

nav a {
  font-weight:800px;
  padding:10px 5px;
}

/**************************
FOOTER
**************************/

footer {
  font-size:0.75em;
  text-align:center;
  clear:both;
  padding-top:50px;
  color:#ccc;
}


.socialicon {
  height:40px;
  width:40px;
  max-height:100%;
  max-width:100%;
  margin:0 10px;
}

/**************************
PAGE: HOME
**************************/

#gallery {
  margin:0;
  padding:0;
  list-style:none;

}

#gallery li {
  float:left;
  width:45%;
  margin:2.5%;
  background-color:brown;
  color:green;
}

#gallery li a p {
  margin:0;
  padding:5%;
  font-size:0.75em;
  color:yellow;

}

.homephoto {
  width:250px;
  max-width:100%;
}


/**************************
PAGE: ABOUT
**************************/


.photo1 {
  height:200px;
  width:200px;
  display:block;
  max-height:150px;
  max-width:150px;
  margin:0 auto 30px;
  border-radius:40%;
}


/**************************
PAGE: CONTACT ME
**************************/

.contact-info {
  list-style:none;
  padding:0;
  margin:0;
  font-size:0.9em;
}

.contact-info a {
  display:block;
  min-height:20px;
  background-repeat:no-repeat;
  background-size:20px 20px;
  padding:0 0 0 30px;
  margin:0 0 10px;
}


.contact-info li.phone a {
  background-image:url('../img/phone.png');
}

.contact-info li.mail a {
  background-image:url('../img/mail.png');
}

.contact-info li.twitter a {
  background-image:url('../img/twitter.png');
}

/**************************
COLOURS
**************************/

/* site body */

body {
  background-color:#fff;
  color:#999
}


/* blue header */
header {
  background: beige;
  border-color: red;
  padding: 10px 0 0 0;
}

/* nav background on mobile devices */
nav {
  background:brown;
  margin:0;
  padding:5px;
}



h1, h2 {
  color: brown;
}



nav a, nav a:visited { 
  color: white; 

}


nav a.selected, nav a:hover{
  color:gold;
}

My responsive.css:

@media screen and (min-width:480px) {

  /**************************
  TWO COLUMN LAYOUT
  **************************/

  #primary {
    width:50%;
    float:left;
  }

  #secondary {
    width:40%;
    float:right;
  }


  /**************************
  PAGE:HOME
  **************************/

  #gallery li {
    width:28.3333%;
  }

  #gallery li:nth-child(4n) {
     clear:left;
  }

  /**************************
  PAGE:ABOUT
  **************************/

  .photo1 {
    float:left;
    margin:0 5% 80px 0;
  }

}


@media screen and (min-width:660px) {

  /**************************
  HEADER
  **************************/  

  nav {
    background:none;
    float:right;
    font-size:1.125em;
    margin-right:5%;
    text-align:right;
    width:45%;


  }

  #logo {
    float:left;
    margin-left:5%;
    text-align:left;
    width:45%;

  }

  h1 {
    font-size:2.5em;
  }

  h2 {
    font-size:0.825em;
    margin-bottom:20px;
  }



}

Answer 1 · 2016-04-11T21:11:48Z

April 11, 2016 9:11pm

Have you tried different browsers? Also, if this problem persists on other browsers, try to play with negative margins on the #logo id and the ul tag to make up the difference.

Answer 2 · 2016-04-14T10:44:26Z

April 14, 2016 10:44am

Hi Devin, thanks for your answer. The same thing kept happening in other browsers so it doesn't look like that's the issue. I've ended up reducing the widths slightly and adding some margin and padding to the top of the nav. That seems to be working at least for now! Thanks

Answer 3 · 2016-04-28T17:44:13Z

April 28, 2016 5:44pm

If you've been following all the steps in this course, then several videos ago you would have added 20px of margin to the top of the nav element in your main.css file so that it wasn't flush against the bottom of the #logo banner. This is still in effect when you add your media queries to float the nav to the right of the #logo, so it looks as if the nav is 20px lower on the screen than the #logo when they're side by side.

In order to get them to line up, you have to zero-out the top margin on the nav element. In this video, you are instructed to add the style "margin-right: 5%" to the nav selector, but you also need to add "margin-top: 0;" or the shorthand version "margin: 0 5% 0 0;".

Hope this helps.

Welcome to the Treehouse Community

Looking to learn something new?

francesmassie

francesmassie

Nav and #logo don't line up like in the video

3 Answers

Devin Gray

Devin Gray

francesmassie

francesmassie

Sean Clark

Sean Clark