If you ever float an image or other element left and wrap text around it, most text wraps fine, however, if you use an ordered or unordered list you’ll find the bullets/numbers aren’t indented the way you’d expect. Often the text is aligned with the other text e.g. paragraphs above and below it and the bullets or numbers are hanging out in space to the left, sometimes even on top of the element you floated. The margin and padding of the list is applied, but it’s applied in the far left, basically underneath your floated image. Like a zombie bunker, you can add more padding and margin to try to overcome the issue, but that assumes that you know the size of the images and that every time the list and image/element match up, is the same size or same proportions. There is a simpler way to solve this though, add the overflow property to the list element (ul or ol). It will then include the margin and padding as you would anticipate and the list will look like it’s supposed to anywhere else on the site.