I'm struggling with floats, what could be wrong?

There are three main things to remember when using floats that should make an easier go of it.

1. Floats are not an island, if you want to float one item on a line, you must float all of the other things that are supposed to be on that line. You may also have to add clear: both; to the item below the floated items so that they steer clear of the way of the floated items.
2. If at all possible, always float: left;. If you float one item left and another item on that line right, you could end up with some wonky spacing that you did not count on. There are circumstances when floating: right is inevitable but those are few and far between.
3. Remember the box model. All of the child elements which you are floating, must equal or be less than their parent element in order for them all to float. Remember the width of your element includes the width + the margin + the padding + border.

Here are two Codepens to help you visualize some floating concepts: the first Codepen is here and the second Codepen is here.

That being said, using floats is only one way to lay out a site. We recommend using Flexbox for a responsive layout (which you''ll learn about in the Coding Responsive Websites class.)