Question: I want to make my webpage responsive, given the HTML and CSS code for it. My webpage looks like the following picture on a large
I want to make my webpage responsive, given the HTML and CSS code for it.
My webpage looks like the following picture on a large sized screen:

Requirement: I want the orange cards to have equal spacing on both the left and right side of the screen.
--------------------------------------------------------------------------------------------------------------------------
On a medium screen, this is how my webpage currently looks like:

Requirement: I want the 3 cards to appear with equal spacing on a medium screen.
--------------------------------------------------------------------------------------------------------------------------
On a small screen, the cards stack on top of each other, showing 1 card on each row::

Requirement: For a small sized screen, I want the card to be in the middle of the screen with equal spacing on both right/left sides.
--------------------------------------------------------------------------------------------------------------------------
Here is my HTML and CSS code that needs to be modified:
Background Top
LOREM IPSUM
Ipsum
Ipsum
Ipsum
Ipsum
Ipsum
Ipsum
Ipsum
Ipsum
Ipsum
Ipsum
Ipsum
Ipsum
Ipsum
Ipsum
Ipsum
Ipsum
Ipsum
Ipsum
LOREM IPSUM s Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum 27 LOREM IPSUM Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum LOREM IPSUM Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
