In this video, we're going to answer one of the most frequently asked questions on HTML/CSS--how to nest elements inside of other elements, and center those items.

Though it's easy to implement it using Bootstrap or Foundation, access to it may be limited. Instead, let's explore how to do so using our CSS tags.

We're going to learn how to do so by creating three pricing tables below our paragraphs. Also, we're going to make these elements responsive, so they get aligned in a single line for mobile screens.

Start off with a <div> tag with ID called pricing-table. Next, create three <div> tags inside of it-- one for each package. Also, associate a class titled package with these <div> tags.

<div id="pricing-table">
  <div class="package">
    <h2>Package 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p>
    <p>9.99/m</p>
  </div>

  <div class="package">
    <h2>Package 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p>
    <p>19.99/m</p>
  </div>

  <div class="package">
    <h2>Package 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p>
    <p>49.99/m</p>
  </div>
</div>

On the webpage, they're all placed one below the other.

Now, let's work on our package class. Go to styles.css and give a background-color, the red color used for our heading and subheading, to match. Also, give it a border-radius of 3px, a padding of 20px, and a margin of 50px.

The webpage will look as so:

To continue with our styling, let's add a font-size of 1.2 em, and a solid green border bottom of 10px. Finally, we'll shrink each element to have a width of 200px.

.package {
  background-color: #e8e8e8;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 20px;
  margin: 50px;
  font-size: 1.2em;
  border-bottom: 10px solid green;
  width: 200px;
}

By working on the parent <div> class that has an ID called pricing-table, we can put them adjacent to each other.

Inside this selector, add an option called display and give it a value flex. This option puts the tables right next to each other.

Although these are the exact results we want, we are not finished yet.

Use another attribute called flex-wrap and give it a value wrap. Essentially, this allows our items to wrap to the next one. This option comes handy when we want the screen to scale down for smaller screens.

If you have a big screen, you'll see that the tables are aligned to the left like this:

However, these elements should be centered and spread throughout the page.

To fix this, we'll use an option called justify-content and give it a value center. I'm also going to put one more attribute called align-items and also give it a center value. So, the complete code for pricing-table is:

#pricing-table {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

Now, notice that the items are centered, regardless of the size of the screen. For mobile phones, the items get stacked one below the other.

So, this is one of the best ways to center elements. It's a good idea to save this code, so you can use it when you're building your own applications in the future.