Nav and Logo not aligned with one another

Question

My navigator and logo are not aligned, even though they should be judging by the code. First I figured it had to be something wrong with my screen settings or something, but I get the same problem when displaying the website on my smartphone. Also, I have a problem that did not appear until later in this course, but I figured it might be related. At a certain screen size the different list elements in the navigator behave strangely and sort of stack on top of each other. However, with a larger or smaller screen size the navigator seem to format like it should based on the media queries.

You'll find screenshots and my css and html code below. I have looked through Nicks code several times but I fail to see what I have done wrong. Big thanks to anyone who can help me out!

http://imgur.com/a/E4oEg

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

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


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

a {
  text-decoration: none;
}

img{
  max-width: 100%;
}

h3 {
  margin 0 0 1em 0;
}

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

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

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

h1 {
  font-family: 'Open Sans', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.9em;
  margin: -5px 0 0;
  font-weight: normal;
}

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

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

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

nav li {
  display: inline-block;
}

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

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

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

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}


/************************************
PAGE: PORTFOLIO
************************************/

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

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

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

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

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}

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

.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')
}

/************************************
COLORS
************************************/


/* site body*/
body {
  background-color:: #fff;
  color: #999;
}

/*green header */
header {
  background: #1abc9c;
  background-color: #1abc9c;

}

/*nav background on mobile devices */
nav {
  background: #16a085;
}

/*logo text */
h1, h2 {
  color: #fff;
}


/*links*/
a {
  color: #1abc9c;
}

/*nav link */
nav a, nav a:visited {
  color: #fff;
}

/*selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}

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

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

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

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

  /************************************
  3 * 5 = 15
  100 - 15 = 85
  85/3=28.333333333333333%
  ************************************/


  /************************************
  PAGE: PORTFOLIO
  ************************************/

  #gallery li {
    width: 28.333333333%;
  }

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

  /************************************
  PAGE: About
  ************************************/

  .profile-photo {
    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;
  }

  header {
    border-bottom: 5px solid #16a085;
    margin-bottom: 60px; 
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Olof Hallqvist | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic|Changa+One' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initia-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Olof Hallqvist</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of glows </p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using Photoshop brushes</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/olle.hallquist"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 Olof Hallqvist.</p>
      </footer>
    </div>
   </body>
</html>

Answer 1 · 2015-10-14T21:45:39Z

October 14, 2015 9:45pm

Hi Olof,

The issue is with your 'ul', it has still got its default padding. This is because you missed a colon in your style sheet for the padding. The stacking is caused by there not being enough space in the nav container when it shrinks down, the items drop to the line below. Fixing the padding will help, but to remove it altogether, take out the margin as well.

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

Welcome to the Treehouse Community

Looking to learn something new?

Olof Hallqvist

Olof Hallqvist

Nav and Logo not aligned with one another

Per Karlsson

Per Karlsson

Olof Hallqvist

Olof Hallqvist

Justin Iezzi

Justin Iezzi

Olof Hallqvist

Olof Hallqvist

1 Answer

Damien Watson

Damien Watson

Olof Hallqvist

Olof Hallqvist