If you open this blog-post of mine, on higher resolutions, you can see that the numbers of the <ol> element cover the <div> with a picture and caption that is floating to the right:
How do I move the numbers of the <ol> to the right so that they don't cover the <div>?
Here is (I think) minimal reproducible example:
<html>
<head>
<title>Numbers of the "ol" element covering a div</title>
</head>
<body>
<div style="width: 300px; height: 300px; background: #777777; float: left;"></div>
<ol>
<li>Lorem ipsum dolor sit amet...</li>
</ol>
</body>
</html>
Here is what it looks like in Firefox:
So, what should I add to the CSS of the <ol> to make sure its numbers do not cover the <div> under any resolution?
