We can use the clear property to stop elements underneath the floated element from misbehaving. For instance, let's add the clear property to the paragraph. We'll add clear: both, which clears both left and right floated elements:
.content-block p { font-family: Georgia, 'Times New Roman' sans-serif; background-color: green; clear: both; }
Now, when you refresh, you will see the paragraph text seated below the floated element:
We can do the same thing for h1 and that will sit below:
.content-block .figure { margin: 30px; float: right; } .content-block h1 { color: #fff; background-color: ...