Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Watch Video

Posted September 4, 2014 1:50am by

2nd column in the header

Ok so my 2nd column in the header (index, about, contact...), my index link keeps floating to the right the wider the screen gets. I've set it to float right but it floats left, leaving the other two headline/links below it on the right. What adjustments need to be made, would it have to do with the fonts I chose?

September 4, 2014 1:54am

Hi Tage,

Can you include your code so we can see where the problem might be? Don't forget to checkout the Markdown Cheatsheet (a link right below this box) for posting your code in a way that we can read it. Thanks!

September 4, 2014 5:11am

Here's my html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>THING | BY Thing</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,100italic,900' 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, initial-scale=1.0"> 
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>GARSH.</h1>
        <h2>The thing.</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Hamburgers 1</a></li>
          <li><a href="about.html">Hamburgers 2</a></li>
          <li><a href="contact.html" >Hamburgers 3</a></li>
        </ul>
      </nav>
    </header>

My Responsive.css

@media screen and (min-width: 480px) {
  /******************
  2 column
  ******************/
  #primary {
    width: 50%;
    float: left;
  }
  #secondary {
    width: 30%;
    float: right;
  }

  /******************
  styles for portfolio
  ******************/

  #gallery li{
    width: 28.3333%;
   }

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

  /******************
  page 'hamburgers 2'
  ******************/

  .profile-photo {
    float: left;
    margin: 0 5px 80px 0;
   }

}

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

  /******************
  page 'hamburgers 2'
  ******************/

  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 #599a68;
    margin-bottom: 60px;

  }

}

And just for good measure my main.css

/******************
Hambuergesos
******************/

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

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


a {
  text-decoration: none;
}


img {
  max-width: 100%;
}


/******************
Heading
******************/

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

h1 {
  font-family: "Roboto", sans-serif;
  margin: 15px 0;
  font: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}


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


/* logo text */

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


/******************
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: #ccc000;
}

.social {
  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: #fff;
  color: #ff00ff;
}

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

/******************
Hambuergesos dos
******************/

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

/******************
Hambuergesos tres
******************/

.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: #ffcc00;
  color: #ff0000;
}


/* weird ass colors */

header {
  background: #00ffff;
  border-color: #ff33cc;
}


/* nav background green on mobile devices */
nav {
  background: #62b33b;
}


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


/* link color */
a {
  color: #9966ff;
}


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


/* selected nav link color */
nav a.selected, nav a:hover {
  color: #9900ff
}

2 Answers

September 4, 2014 6:24am

Your Main.css and Responsive.css contradict each other when it comes to the padding and margins on your headers, nav, nav ul, and #logo. You want to achieve 45% and 45% widths, along with 5% left margin, and 5% right margin, which is good and all, but in your main.css, it adds more padding and margins in places that will make your box model larger than 100%.

September 4, 2014 10:10pm

The thing is I thought I was following exactly what Nick was doing in all the videos. Was there something I missed? Why didn't mine end up like his? Is there a specific video I should refer back to? I'm going back and forth between my main and responsive, and I'm not sure what I should be looking for and how they're related. I'm looking at the different elements (headers, nav, etc.) they have commands for different things, but I'm not sure how and why they clash.

September 8, 2014 3:21pm

Hi Tage Smith,

It's a little bit difficult to tell from the code that you posted, but there's 2 things I'd look for at this point:

If that's the entirety of your HTML, then you're missing quite a lot towards the bottom. For example, you need to make sure to close the <body> and <html> elements.
If you're using Firefox, please check out the teacher notes for this video. There you'll find a code correction for Firefox. :)

September 10, 2014 3:51am

No I'm not using firefox. I only posted the header part because that's where the problem is.

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Tage Smith

Tage Smith

2nd column in the header

Kate Hrycak

Kate Hrycak

Tage Smith

Tage Smith

2 Answers

Drew Schott

Drew Schott

Tage Smith

Tage Smith

Nick Pettit

Nick Pettit

Tage Smith

Tage Smith