BestBite Project: Column Text not Centered

<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
HTML & CSS: Project BestBite

I did what was required of me in task 4:

In the supporting section, within the page-header div, add a row with three equal-sized columns.

In each column, add a subheading, and then add a list containing recipe names. Feel free to use your own text.
<In what way does your code behave incorrectly? Include ALL error messages.>

This is what my section looks like. I’m referring to the Breakfast, Dinner and Dessert columns.:

This is what the reference site provided by the exercise looks like:

I don’t get why the meals are not centered well with the red column names.

Here is my CSS and HTML. I used text-align:center; everywhere.

HTML snippet ```

Newest Contributions


Breakfast

  • Maple French Toast
  • Rolled Oats with Berries

Dinner

  • Black Bean Stuffed Peppers
  • Pesto Pasta with Spinach

Dessert

  • German Chocolate Cake
  • Hazelnut Tiramisu
```

CSS snippet

/* page-header */
.section h3 {
  margin-bottom:20px;
  text-align:center;
  color:grey;
}

.section h4 {
	margin-bottom:20px;
  text-align:center;
  color:red;
}

.section li {
  text-align:center;
  color:grey;
  list-style-type:none;
  margin:0;
}

The only thing I can think of with out being able to put your code in a file and test it myself (not able to right now at least) is maybe clear the padding/margin for the h4? They have weird pre-set paddings / margins, i could be completely off so i apologize if I am, I am fairly new to this as well, I just finished the html/css.

1 Like

Thanks, I tried as you suggested but that didn’t do it.

I managed to fix it. I changed the reference that pointed to li to ul instead and that did the trick.
Instead of this:

.section li {

I instead made it this. I had also moved the text-align:center to a general .section section to cover all child elements below it (h3, h4, ul). I had first done this and that didn’t work. It wasn’t until I changed the li to the ul reference.

.section ul {
  color:grey;
  list-style-type:none;
  margin:0;
  padding:0;
}

That’s not very obvious why one and not the other fixes the centering.

2 Likes