Beautifying the features list

With icons, titles, and short descriptions, our features section currently looks like the following screenshot in a wide viewport:

We need to enlarge the icons, align the text at the center, and iron out the grid layout.

Let's review the markup structure for the features list:

<section id="features">
  <div class="container">
    <h1>Features</h1>
    <div class="row">
      <div class="features-item col-md-4">
        <span class="icon fa fa-cloud"></span>
        <h2>Feature 1</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo. </p>
      </div>
   ...

Note

Each feature with its icon, heading, and paragraph is wrapped in a div tag with two classes: features-item and col-md-4.

With this in mind, let's write the styles we need:

1. With _page-contents.less opened in your editor, add a new section with a comment for our #features section.

   ...