Question

The <nav> should be aligned to the left, below the logo and slogan. However, despite attempting to do so with both margin and padding it remains above the logo and centered on the page. Any help with how to rectify this is greatly appreciated.

HTML

<header>
    <div id="logo">
        <a href="#"><img src="img/logo.png" alt="GEC logo" /></a>
    </div>
    <div id="slogan">
        <h1>Revolutionizing Potential</h1>
    </div>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Coaching Services</a></li>
            <li><a href="#">Resources</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </nav>
</header>

CSS

/* Header */

header {
    margin-top: 95px;
}

#logo {
    float: left;
}

#slogan {
    float: right;
    margin-top: 90px;
}

nav ul li {
    display: inline;
    float: left;
}

nav ul li a {
    padding-right: 20px;
}

nav ul li:last-child {
    padding-right: 0;
}

Answer 1

To your CSS add:

nav {
    clear:both;
}

jsFiddle example