Supporting section Bestbite 4/5


#1

Having issues getting the columns in the supporting section to be centered in the page. Here's my page right now. The code for this section looks like:

<div class="section">
      <div class="container">
        <div class="page-header">
          <h3>Newest Contributions</h3>
        </div>
        <div class="row">
          <div class="col-md-4">
            <h4>Breakfast</h4>
          </div>
          <div class="col-md-4">
            <h4>Dinner</h4>
          </div>
          <div class="col-md-4">
            <h4>Dessert</h4>
          </div>
        </div>
      </div>
    </div>

#2

Ah, that was dumb. Right after I posted the topic I realized that all I had to do was center the text within each h4 element. :grin:

Writing my problem out helped!


#3

I was just going to say that, the row is perfectly centered on the page, but the text in the cols is aligned to the left, which might give the illusion the row isn't centered


#4

I have no idea if this is covered in the pro course, still haven't had time to do the pro course, but there is a quick way you can spot this sort of things, put your mouse over the col's, right click and select: inspect element, then you get the inspector, which is really nice:

As you can see, i hover over the col in the inspector, the browser will now show the box (light blue) and the padding (purple). Which is really useful in this case. I have no idea if you already know this, but i hope it helps


#5

Yep, I use devtools. My mind was just really focused on there being something wrong with the columns as opposed to the text alignment. :sleeping:


#6

You quickly figured what was wrong, i guess you used to dev tools quickly to figure this out