Using align-items

To build the product listing, we're going to start with some new markup that will sit directly above the footer:

<!-- ===============Product Listing===============--><section class="secondary-section grouping">    <ul class="wrapper product-list">        <li class="product-list-item">            <figure>                <img src="images/octopus-icon.svg" alt="Octopus">            </figure>            <h2>The Octopus</h2>            <p>Lorem ipsum dolor sit.</p>            <a href="#" class="button">Tenticals &raquo;</a>        </li>        <li class="product-list-item">...</li>        <li class="product-list-item">...</li>        <li class="product-list-item">...</li>        <li class="product-list-item">...</li>        <li class="product-list-item">...</li>    </ul><!-- end wrapper --></section><!-- ================ Footer================-->  ...

Get Mastering CSS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.