Main Banner Title and Tagline

It is time to position the markup inside the main banner.

In regular websites, there is usually an image behind this area. However, here we are only focusing on structure. Therefore, we will skip the background image.

Let’s examine the new markup. We have a title and a tagline. We would like to center both the title and the tagline below each other and leave a 20px top and bottom space around the title-tagline pair.

<section class="main-banner">
   <h2 class="main-title">Flexblog Gems<h3>
   <p class="main-tagline">Learn everything about Flexbox</p>
</section>

Given this is a Flexbox course, our first idea could be to use Flexbox to structure the text:

.main-banner {
  display: flex;
  flex-direction: column; 
  align-items: center;
}

While this approach is technically feasible, bear in mind that we don’t have to use Flexbox just for centering text.

Don’t use Flexbox for simple tasks like centering text.

Instead of a Flexbox solution, we can simply use a text-align: center; rule in this context:

.main-banner {
  background-color: lightsalmon;
  min-height: 100px;
  border: 1px solid black;
  padding: 20px 0;
  text-align: center;
}

The page looks as follows: