The Box Model: Davie's Burgers - Content Not Centered

Web Development Front-End
1

The Box Model: Davie’s Burgers

During this lesson we were instructed to:

  • Create 10-pixel vertical margins and automatic horizontal margins

for the .content class element

We were also instructed to:

  • Set .body elements inside .content to have no vertical margin and automatic horizontal margins so that it is centered.

The following shows the code I added to style.css

.content {
  width: 100%;
  height: 500px;
  margin: 10px auto;
  overflow: scroll;

.content .body {
  width: 90%;
  margin: 0px auto;
}

I would have expected the paragraph within the content body to align center with the page. Perhaps it’s my eyes but the paragraph doesn’t look center to me. It didn’t look centered when I watched the developer work through the project either. Do I have bad eyes or am I missing something here?

2

That width will not render with margins as they are hidden. Set the width to less than 100% if you wish to see your automatic horizontal margin.

3

That didn’t fix my issue. I tried 95% then 90%. How would that even matter here. The .content width is 100% but the .content .body is a child of .content. So when we set margin for .content .body, which targets the p element inside of the .content div element wouldn’t that center it? Mind you when I followed the instructions of the lesson and when I changed it according to your suggestion the p (.content .body) was slightly left of center.

4

Please copy the URL in the location bar of the lesson page and paste it into a reply. We can have a look at the instructions and test our own solution.

5

I thought I posted the URL to the lesson in my topic opening. I titled it but it links to the lesson I’m looking at. Or are you asking for something else. Sorry for my confusion.

1 Like
6

D’oh! So you did, my bad.

Try setting the width on .content to 90%. It should be centered.

7

Thank you for looking into it. I’m really trying to wrap my mind around this box model and this throws me off from what I understand so far.

8

The box model is quite simple, when we break it down.

Given a content-box, of some width and possible height (height can be variable, controlled by the amount of content in the box) only the content and padding are inside the content-box. The border and margin are outside of the content-box (unless specified otherwise for border-box). If our content-box is 500px wide with a border of 10px and margin of 20px, our box-model will be 530px wide. If we have some specified height of say, 500px; the box-model will be 530px in total height.

Inside the content-box

  • content
  • padding

Outside the content-box

  • border
  • margin
  • offset (to be discussed when those properties come up)

Margins do not have any effect on the content-box, but padding has a direct effect. Until this is well understood and played around with, avoid using padding for the time being.

9

Hi! I was working on the same project and encountered the same error and found a solution. .body p is altering the margin of the content as well and preventing it from being altered! If you change .body p to something like:

.body p {
color: #333333;
font-weight: 100;
line-height: 34px;
width: 90%;
margin: 18px auto 0 auto;
}

It should start working!

10

In task 1 it says “Center the img horizontally using the margin property.” which I understood as:

nav {
text-align: center;
width: 180px;
margin: center;
}

But after changing the margin to auto, my “Davie’s Burgers” image and nav items (menu, nutrition, order, locations) became centered on the page and with the content. Example below:

nav {
text-align: center;
width: 180px;
margin: auto;
}

Hope this helps!

1 Like
11

Does the margin property even have a center value?

12

I don’t believe so, but as a newbie to programming I figured others may make the same mistake.

1 Like
13

Another way to do it:

nav {
  text-align: center;
  width: 180px;
  margin: 0 auto;