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

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

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>

That's it! Thank you so much :)

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.

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.

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!