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

Floats are one of the most fundamental attributes to create your layouts and you will use them on almost every project. But floats are the problem child of CSS. It often refuses to grow up and insists on throwing tantrums! 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, there will always be new methods that become available for web layouts so do not forget to be aware of new technologies that come around that could make your job easier (like Flexbox, which we'll discuss in Coding Responsive Websites).