I like the look of our page, one thing I noticed though is here the plans, we could center them because
they're not centered right now.
If we go back to our main index.html file in the root folder, here we've got our section with the
ID plans and there, we got the div with all our plans inside of it.
Now we could give that div a class, plans or plan lists to stay in line with the other code we wrote in this
module thus far
and then in the main.css file, maybe above plan here for plan list with a class selector though,
we can set something like width
80% margin
auto to also center this horizontally. Now with margin
auto added,
if we go back and refresh the page, we see that this is centered, that these three boxes are centered.
Now if we change the page size, you see it doesn't look that great if we go to a very small device width
but we'll take care about this later in the course when we implement a responsive design
but at least it doesn't go as broad on a big device and we have this block of three elements centered.
Now one thing you might notice though is that whilst the block of the three elements actually is centered,
we can confirm this by inspecting it in the dev tools, there
you can see that indeed this div does have an equal margin,
this orange part on the left and right
but even though that's the case, the blocks themselves inside of that div are not centered.
So in that blue area here, you see there's more whitespace on the right than on the left
and you can also tell by the section title which is not centered above that highlighted box.
This happens because inside of our div with the plan list class, we have three inline block elements
sitting next to each other.
The overall block is centered on the page but inside this block, the three elements are not.
Now we can do this by simply adding text align center here to plan list.
If we do that and then reload,
now we see that the three elements are indeed now also centered within their div and therefore this section
title perfectly aligns with that middle highlighted box and that's it.
Now in the next course module, Manuel will take over and will introduce you to positioning, something
which actually offers you quite a bit of possibilities and which allows you to control how your elements
are actually positioned in detail on your page.