problems with website layout

You are using float on nav and #logo so elements after the floating elements will flow around it. A quick fix for now is to add p {clear:both} but watch (or re-watch) the videos on layouts and using float here on Treehouse.

Hello Troy!

Using "float" on a element takes it out of the default document flow. There are a few ways to fix your problem, but in this particular case, You should simply create a class called "clear" in your CSS stylesheet.

The CSS snippet that You must add is as follows:

    .clear {
        clear: both;
    }

This basically tells the browser to remove any non-floated elements from the "floated" elements area. This is not a definition, this is the simplest way to explain.

Therefore, your HTML markup should look like this:

<header>
      <h1 id="logo">EF Everything United</h1>
      <nav>
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Blog</li>
          <li>Best Eleven</li>
          <li>Contact</li>
        </ul>
      </nav>
    </header>

    <div class="clear"></div>

    <section>
          <p>ffffffffffffffffffffffffff</p>
    </section>

You simply add a blank div between the containers that you wish to separate and give it a class of "clear". I hope this helps!

Cheers!

Hi Troy,

You should have your section element clear the floated elements in the header. This is the first element after the header and by using clear:both the browser will force that element below all previously floated elements.

section {
  clear: both;
}