Move project


#1

Step two in the Move project is giving me some trouble. The three things keep stacking vertically. I have tried to do inline-block but maybe I'm doing it wrong.
Help please!!

my code https://gist.github.com/codecademydev/6efab719b4f35cfa6062


#2

Hey Lola,

So here's your code that's causing the problem:

<div class="supporting">
  <div class="container">
    <div class="col">
      <div class="clearfix">
        <h2>Move</h2>
        <p>Become more active by tracking your runs, rides, and walks.</p>
        <h2>Sync</h2>
        <p>Access your activity on your phone, tablet, or computer.</p>
        <h2>Compete</h2>
        <p> Set personal challenges and see how you rank against your friends.</p>
      </div> 
    </div>
  </div>
</div>

What you need to do is put a <div class="row"> around everything except your supporting <div>. Then, I think you can remove your clearfix <div>, although I'm not sure about that.

After you do that, you should wrap each <h2> and it's corresponding <p> inside it's own <div class="col-md-4">.
That way, each heading and paragraph there will get it's own column, a third of the total width (since the grid column Bootstrap uses is twelve columns wide).

I hope this helps! :slightly_smiling:


#3

A post was split to a new topic: How can I get my columns side-by-side, instead of stacked vertically?


#4