BestBite Project: Column Text not Centered


#1



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.

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

    <div class="section">
      <div class="container">
      	<div class="page-header">
      	  <h3>Newest Contributions</h3>
          <hr>
          <div class="row">
            <div class="col-md-4">
              <h4>Breakfast</h4>
            	<ul>
                <li>Maple French Toast</li>
                <li>Rolled Oats with Berries</li>
              </ul>
            </div>
            <div class="col-md-4">
              <h4>Dinner</h4>
              <ul>
                <li>Black Bean Stuffed Peppers</li>
                <li>Pesto Pasta with Spinach</li>
              </ul>
            </div>
            <div class="col-md-4">
              <h4>Dessert</h4>
              <ul>
                <li>German Chocolate Cake</li>
                <li>Hazelnut Tiramisu</li>
              </ul>
            </div>
          </div>
      	</div>
      </div>
    </div>

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;
}


#2

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.


#3

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.