Product preview card component

for the body, add these styles:

display: grid;
place-content: center;
height: 100vh;
}

What that'll do is put the content in the middle and make the body 100% of the view-height; hence using the vw unit.

for your .section__one and .section__two classes, add:

flex: 1

what that flex: 1 property does is set the flex-grow and shrink values to 1 (its a shorthand for flex-grow: 1 and flex-shrink: 1) so both items can grow and shrink at the same time.

you want to add that here so both items can take equal width/space.

With that said, those solutions are for desktop, I didn't see how (or if) it would affect mobile.

good job completing the solution!!!

You can add the following code to distribute space evenly in the main div

.main{ display: flex; }

For the divs inside the main div

.left-div, .right-div{ width:50%; }