My footer elements are floating to the right of the last image in the gallery;

Hi,

You could set the clear property on your footer element.

footer {
clear: left;
}

You need to clear your floats.

Hi,

add the property clear:both for the footer element which will resolve the issue.

Clear Poperty specifies - No floating elements allowed on the left or the right side of a specified <p> element:

footer {
  clear:both;
}

Hi Aaron,

Another option for the footer issue - which I've got into the habit of doing with each project - is to create a div with the class of "clear", and mark your css like so:

.clear {
  clear: both;
}

Then, anywhere you use floats in your page, put this class after the last floated element. So in your example it'd go after your closing "ul" tag:

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

This will have the same effect as the solutions mentioned above. Just a preference thing.

Your second issue - your nav elements pushing over into two lines on smaller screens - is because the width of the combination of these elements (in this case the three "li" elements) is exceeding the small browser width. Therefore they break up onto multiple lines. Bear in mind, that is the width of the actual text in the "li" tags, plus the padding and the margin that you've set around them. So, if you want them to remain on one line, you should decrease this overall width, either by:

• Decreasing the font size of the "li" elements
• Decreasing the margin and/or padding around the "li" elements

Another common option is to use media queries, which is tied up with responsive design. That is, to set certain CSS styles on larger browsers, and other CSS styles for smaller browsers.

Hope that helps,

Ede