I utilized flexbox properties to achieve this layout for my section:
https://i.sstatic.net/UxQeW.jpg
While it functions smoothly in Chrome, I noticed some disparities when viewing in Firefox and Safari.
This is how it appears in Chrome: https://i.sstatic.net/ZPOFh.jpg
In Firefox, I'm encountering difficulty in applying a 1% margin as intended, as indicated by the red warning signal:
https://i.sstatic.net/5cCiW.jpg
And in Safari, the boxes are stacked one after another:
https://i.sstatic.net/SxKBH.jpg
The website is powered by WordPress but is not yet live. Here's the HTML structure:
<section id="services">
// Title of the container goes here
<div class="main-container col-lg">
// All the box elements go here
<div class="services-container">
// Individual box content
</div>
</div>
</section>
Here is the CSS:
#services {
background-image: url("img/Services-background.jpg");
background-color: red;
}
.col-lg {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: initial;
max-width: 100%;
}
.services-container {
color: #d6d6d6;
margin: 1%;
max-width: 100%;
width: 30%;
}
How can I ensure this layout works consistently across all browsers?