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

HTML How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Posted by Tage Smith
Tage Smith
2,997 Points

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?

Kate Hrycak
Kate Hrycak
5,542 Points
Kate Hrycak
Kate Hrycak
5,542 Points

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!

Tage Smith
Tage Smith
2,997 Points

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

Drew Schott
Drew Schott
8,484 Points
Drew Schott
Drew Schott
8,484 Points

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

Tage Smith
Tage Smith
2,997 Points

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.

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

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:

  1. 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.
  2. If you're using Firefox, please check out the teacher notes for this video. There you'll find a code correction for Firefox. :)
Tage Smith
Tage Smith
2,997 Points

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