CODEWITHSUNDEEP
csstwitter-bootstrap
Scott
Scott

Reputation: 1247

Bootstrap columns not lining up

I am trying to build a website that uses the Twitch API and posts which users, from a predetermined array of 7 users, are online and which are not. It pretty much works, but at the moment, the edges of my top div are not lining up with the edges for my list of users.

Here's a link to the codepen: https://codepen.io/lieberscott/pen/YVZQMG

enter image description here

And here's some of my code.

HTML:

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-3">
    </div>
    <div class="col-xs-6 head">
      <span class="title">
        Twitch Streamers
      </span>
        <table>
          <tr>
            <td id="all">ALL</td>
          </tr>
          <tr>
            <td id="online">ONL</td>
          </tr>
          <tr>
            <td id="offline">OFF</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
    <div id="result">

    </div>
</div>

CSS

$blue: #5D6E81;
$gray: #68636B;
$khaki: #B7D0B9;
$title: #F1EBF2;

img {
  border-color: white;
  border-radius: 50%;
  border-style: solid;
  border-width: 3px;
  height: 50px;
  margin-right: 25px;
  width: 50px;
}

line {
  background-color: $title;
  height: 5px;
}

table {
  float: right;
  font-size: 10px;
  margin-right: 6px;
}

.act {
  background-color: $khaki;
  margin: 1px 0px 1px 0px;
  padding: 8px 8px 8px 15px;
}

.desc {
  color: $gray;
  padding-top: 20px;
}

.desc2 {
  color: $title;
}

.head {
  background-color: $gray;
  color: $title;
  font-size: 40px;
  overflow: hidden;
  padding: 15px 0px 10px 25px;
}

.inact {
  background-color: $blue;
  margin: 1px 0px 1px 0px;
  padding: 8px 8px 8px 15px;
}

.inact a, inact a:hover {
  color: $khaki;
}

.title {
  font-family: 'Days One', sans-serif; 
  font-size: 40px;
}

Is there anything I can do with this existing code to make sure the width of the top div is aligned with the results? Or do I need to rework it?

(As a note, I did have it aligned with previous code using a single row and putting each result in a "col-xs-6 col-xs-offset-3" class, but this created another problem which was I couldn't make each result's img, user name, and status be vertically aligned with each other, which I would prefer.)

Upvotes: 0

Views: 1048

Answers (1)

mayersdesign
mayersdesign

Reputation: 5310

You accidentally closed your .container before the results. Remove the </div> immediately above the #results wrapper, paste it further down, and it all lines up: https://codepen.io/mayersdesign/pen/GmWyWy

Upvotes: 3

Related Questions