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 Marci Tarpy
Marci Tarpy
6,992 Points

Header is not aligned with the nav links

The adjustments I made to make the header float to the left worked but it is only floating to the top left while in the video example the logo is aligned with the navigation links. Can you help me see what I am doing wrong? Thank you!

index.html

<head>
    <meta charset="utf-8">
    <title>Marci Tarpy | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400i,700,700i,800" rel="stylesheet">
    <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>

main.css

/***********************
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: 'Changa One', sans-serif; 
  margin:15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

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

responsive.css

@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 #599a68;
    margin-bottom: 60px;
  }
}
Marci Tarpy
Marci Tarpy
6,992 Points

Sure! Here it is:

  <header>
      <a href="index.html" id="logo">
          <h1>Marci Tarpy</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>
bhateam
bhateam
8,765 Points

Are you trying to get the navigation to be a horizontal layout aligned with your h1 and h2 tags but just floating to the left? I skimmed through the video and saw that that is ultimately how it ends up.

3 Answers

Yaşar Dilbaz
Yaşar Dilbaz
5,454 Points
Yaşar Dilbaz
Yaşar Dilbaz
5,454 Points

I couldn't see the problem when I created HTML and CSS files and copied your content. But one of the best ways to solve layout problems is giving 1 px solid red border to the elements where problem occurs. If you set border for header and its child elements maybe you can see why it doesn't look aligned. If you still can not find the problem then I would suggest downloading current courses project files and then compare with your code. Let me know if you got any solution or not. :)

Marci Tarpy
Marci Tarpy
6,992 Points

THANK YOU YASAR DILBAZ! I compared my coding with the current course project files like you suggested and I figured out the problem! I incorrectly had the following coding on my main.css page:

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

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

The coding that fixed it is as follows:

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

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0 0;
}
Yaşar Dilbaz
Yaşar Dilbaz
5,454 Points
Yaşar Dilbaz
Yaşar Dilbaz
5,454 Points

Hey Marci, Can you include the header coding in html?

Marci Tarpy
Marci Tarpy
6,992 Points
Marci Tarpy
Marci Tarpy
6,992 Points

BHA Team, yes! That is what I was attempting to do!