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 Macauley Treleaven
Macauley Treleaven
991 Points

Can not get my nav bar to float right when resizing the window. Logo works fine but nav bar just messes up layout?

Here is a snapshot of my code - https://w.trhou.se/jev7mne1cm

The problem I am having is when expanding the window size the logo text "Macauley Treleaven Web Developer" responds accordingly and moves to the left. However, the navigation bar does not float to the right and instead falls downwards into the main body of the site. I am hoping this is a simple mistake I have made somewhere earlier in the process. I have tried a few remedies such as changing the margin and padding of the nav bar but this has not solved the problem.

Any help would be great!

Thank you in advance.

2 Answers

Matthew Potter
Matthew Potter
8,718 Points

This should fix it.. Your header tag needs to be wrapped around logo and nav bar

<header>
      <a href="index.html" id="logo">
        <h1>Macauley Treleaven</h1>
        <h2>Web Developer</h2>
      </a>
      <nav>
        <ul>
        <li><a href="index.html" >Portfolio</a></li>
          <li><a href="about.html"class="selected">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
</header>
Macauley Treleaven
Macauley Treleaven
991 Points

That's it! Thank you so much :)

Matthew Potter
Matthew Potter
8,718 Points

You're welcome. Watch your indentation and tags. I would stop every so often and double check to see if the code matches up with theirs in the video even if you have to go back and rewatch.

Matthew Potter
Matthew Potter
8,718 Points
Matthew Potter
Matthew Potter
8,718 Points

Some advice to prevent this. No matter what tag you start, whether it be a div, header, nav, p, li, ul, etc. always start and close your tags. then push enter where you start to enter in your content so that way it properly indents itself.

Macauley Treleaven
Macauley Treleaven
991 Points

I will look out for that, I seem to be quite lazy with spacing and proper indentation but am slowly learning how important it can be. Thanks for your help!