I encountered a frustrating issue where I couldn't properly center the divs on my webpage. The specific challenge I faced was trying to center a div within another div. Despite numerous failed attempts and extensive research, I eventually found a solution to center the div. However, when I resized the viewport to be smaller than the div, the centering was lost and the div floated to the left. This issue only seemed to affect unordered lists (navigations) within divs.
Below is a simplified version of the code for my webpage, and you can also view it on JSBin:
<body>
<div id="container">
<header id="topheader">
...
</header>
<div id="content">
...
<div id="images">
<ul>
<li><a href="#"><img src="..."></a></li>
<li><a href="#"><img src="..."></a></li>
<li><a href="#"><img src="..."></a></li>
<li><a href="#"><img src="..."></a></li>
</ul>
</div>
...
</div>
</div>
</body>
The issue specifically pertains to the images within the div. A similar problem occurs elsewhere on the page as well.
My main question is: what is causing this behavior and how can it be resolved?