Davie's Burgers Project Step 3

Hello! I am asking this question to clarify a point which I have not understood very clearl.
In the last assignment of the 3rd step of the project is demanded that we center the .content .body class. I have tried the code .content .body { width: 90%; margin: 0 auto; }
But on the webpage on the right it doesnt seem to center. I also watched the walktrough video. The same code is used and also in that video the element isn’t centered very well so I am really confused. The link to the project is:
https://www.codecademy.com/paths/learn-how-to-build-websites/tracks/intermediate-css/modules/learn-css-box-model/projects/box-model-on

Thank for any help in advance :smiley:

If you paste your code I can chime in more accurately. You could also sift really quickly through previous lessons or look in the cheatsheets for any specific mention of align, it’ll probably be the one they want you to use.

You might be expected to use one of the align attributes. Maybe align-content is the one they want:

1 Like

I don’t think they expect me to use the align properties in this specific project. If you have time I would appreciate if you can take a look in the solution video:

The point I got stuck is around 4th minute mark. Even though the instructor in the video says that the element is centered I dont think it is. Maybe my confusion is due to the term/language used.

You can always click the view solution and make note of it. I think since this issue is not too much of problem solving it’s ok for this type of situation.

Chiming in quite late here, but I noticed the same thing: the paragraph element isn’t quite centered, even though the solution video says that it is—but if you look closely on the video, the text is slightly left of center!

After asking my code mentor(i.e. live-in partner who helps me get unstuck since he’s an experienced programmer), he pointed out to me that the problem lies in the repeated rule sets that use “width: 90%” in both “.content .body” and in “.body p”:

/* Content Body */

.content .body {
width: 90%;
overflow: scroll; /*added as per project instructions */
margin: 0px auto; /*added as per project instructions */
}

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

When “.body p” is changed to “width: 90%” it is default left aligned. So a new declaration is needed to center it—if you replace “margin-top: 18px;” with “margin: 18px auto 0;” then the “.body p” will be centered properly.

I spent so much time staring at it, trying to decide if my eyes were wrong!

1 Like