My dilemma could not be clearer - I am struggling to properly align 4 divs within a width of 1150px (the maximum width of the content div). When resizing the screen, I want them to adjust accordingly: 4 in a row when possible, then 3 in the center, and so on.
For screens larger than 1150px, the desired layout can be seen here: https://i.sstatic.net/i9XxP.png. Currently, my closest attempt looks like this: https://i.sstatic.net/mlqsL.png. Adjusting the left margin for the first child helps, but the issue persists with multiple rows. Creating new rows as separate divs is problematic as it disrupts the layout when resized to show only 3 or 1 item per row.
The goal is for the alignment to center smoothly upon resizing, maintaining even margins on all sides. The current outcome does not meet these expectations, as shown here: https://i.sstatic.net/rst3B.png.
At present, my code is limited to this snippet due to lack of alternative solutions:
div.project-container {
float: left;
margin: 0 8px 30px 8px;
position: relative;
width: 270px;
}
I believe Javascript may hold the key to resolving this challenge, and I am open to suggestions or examples found online. Any guidance will be greatly appreciated. Thank you.