I need to create 3 div squares: div-left, div-middle, and div-right, each with a width of 300px. These squares should be arranged horizontally within the parent div main-section, which will adjust its size based on the screen width, being 1300px if the screen is larger than 1300px and shrinking if the screen is smaller.
The positioning of the 3 squares should start at 0px (the left side of div-left) and end at 1300px (the right side of div-right), with equal spacing between them.
main-section is contained within the parent div full-width-section, which spans the full width of the screen to prevent empty space in case the screen width is greater than 1300px.
The goal is to ensure that main-section does not exceed 1300px when the screen width is larger than 1300px, but shrinks responsively when the screen width is less than 1300px. By using flex layout, I aim to evenly space the 3 squares as the screen size changes.
In addition, main-section should be centered within full-width-section and expand to 1300px when the screen width is greater than 1300px.
Although I have successfully centered main-section, it currently only occupies the sum of the square widths, rather than 1300px when the screen width exceeds 1300px.
HTML (colored divs for easier viewing):
<div class="full-width-section" fxLayout fxLayoutAlign="space-evenly stretch">
<div class="main-section" fxLayout fxLayoutAlign="space-between center">
<div class="div-left" style="background: #df1313;width: 300px; height: 300px;"></div>
<div class="div-middle" style="background: #4826df;width: 300px; height: 300px;"></div>
<div class="div-right" style="background: #25ca57;width: 300px; height: 300px;"></div>
</div>
</div>
CSS:
.full-width-section {
width: 100%;
background: #4bd0f1;
}
.main-section {
max-width: 1300px;
background: #e2d959;
}
Link to demo. Any assistance would be greatly appreciated.