1
00:00:02,210 --> 00:00:08,540
I like the look of our page, one thing I noticed though is here the plans, we could center them because

2
00:00:08,540 --> 00:00:10,400
they're not centered right now.

3
00:00:12,140 --> 00:00:18,440
If we go back to our main index.html file in the root folder, here we've got our section with the

4
00:00:18,440 --> 00:00:24,350
ID plans and there, we got the div with all our plans inside of it.

5
00:00:24,470 --> 00:00:32,570
Now we could give that div a class, plans or plan lists to stay in line with the other code we wrote in this

6
00:00:32,570 --> 00:00:33,920
module thus far

7
00:00:34,190 --> 00:00:42,160
and then in the main.css file, maybe above plan here for plan list with a class selector though,

8
00:00:43,330 --> 00:00:46,750
we can set something like width

9
00:00:49,340 --> 00:00:52,100
80% margin

10
00:00:52,100 --> 00:00:56,440
auto to also center this horizontally. Now with margin

11
00:00:56,450 --> 00:00:57,650
auto added,

12
00:00:57,680 --> 00:01:04,340
if we go back and refresh the page, we see that this is centered, that these three boxes are centered.

13
00:01:04,460 --> 00:01:12,410
Now if we change the page size, you see it doesn't look that great if we go to a very small device width

14
00:01:12,680 --> 00:01:17,700
but we'll take care about this later in the course when we implement a responsive design

15
00:01:17,840 --> 00:01:26,120
but at least it doesn't go as broad on a big device and we have this block of three elements centered.

16
00:01:26,120 --> 00:01:32,030
Now one thing you might notice though is that whilst the block of the three elements actually is centered,

17
00:01:32,060 --> 00:01:36,340
we can confirm this by inspecting it in the dev tools, there

18
00:01:36,350 --> 00:01:40,680
you can see that indeed this div does have an equal margin,

19
00:01:40,700 --> 00:01:43,040
this orange part on the left and right

20
00:01:43,280 --> 00:01:51,090
but even though that's the case, the blocks themselves inside of that div are not centered.

21
00:01:51,290 --> 00:01:56,760
So in that blue area here, you see there's more whitespace on the right than on the left

22
00:01:56,900 --> 00:02:02,470
and you can also tell by the section title which is not centered above that highlighted box.

23
00:02:02,480 --> 00:02:10,610
This happens because inside of our div with the plan list class, we have three inline block elements

24
00:02:10,700 --> 00:02:12,320
sitting next to each other.

25
00:02:12,320 --> 00:02:19,340
The overall block is centered on the page but inside this block, the three elements are not.

26
00:02:19,370 --> 00:02:25,440
Now we can do this by simply adding text align center here to plan list.

27
00:02:25,600 --> 00:02:27,720
If we do that and then reload,

28
00:02:27,800 --> 00:02:34,340
now we see that the three elements are indeed now also centered within their div and therefore this section

29
00:02:34,340 --> 00:02:40,810
title perfectly aligns with that middle highlighted box and that's it.

30
00:02:40,850 --> 00:02:47,970
Now in the next course module, Manuel will take over and will introduce you to positioning, something

31
00:02:47,990 --> 00:02:55,760
which actually offers you quite a bit of possibilities and which allows you to control how your elements

32
00:02:55,910 --> 00:02:59,630
are actually positioned in detail on your page.