Axis alignment

Justify-content

Report a typo

This is the catalog page which contains two sections: popular products and other products. Your task is to make two changes:

1) Make popular items stick to the main-start.
2) Make catalog items be justified with gaps all around them.

Your solution should look something like this:

Two columns of content where the second place the items inside by one row

Write HTML and CSS code

<!DOCTYPE html>

<head>

</head>

<body>

<p class="name">Name of the product 1</p>

<p><strong>Price: 100$</strong></p>

</div>

<p class="name">Name of the product 2</p>

<p><strong>Price: 100$</strong></p>

</div>

<p class="name">Name of the product 3</p>

<p><strong>Price: 100$</strong></p>

</div>

<p class="name">Name of the product 1</p>

<p>Ordered 124 times</p>

<p><strong>Price: 100$</strong></p>

</div>

Completed 0 of 2

First container

Second container

___

Create a free account to access the full topic