title: Aligning my div's correctly
body: <p>Been having some problems aligning my div vertically with the rest of my page.  So I have a top div with the main header and then I have a div below that with 3 different columns, each in a div of their own.</p>
  
  <p>Here is the code for the div that contains all three columns:</p>
  
  <pre><code>    &lt;div class="container" id="content-content-library"&gt;
  
  &lt;!-- test!! --&gt;
  &lt;div class="row"&gt;
  
  
  &lt;div class="col-xs-3"&gt;
      &lt;div class="column-left"&gt;
  
              &lt;div class="row"&gt;
  
                  &lt;!-- NOT NEEDED!
                  &lt;div class="row-library col-xs-3"&gt;--&gt;
  
                      &lt;div class="left-navigation-home"&gt;
                          &lt;img src="/img/home_library.png" /&gt;
                          &lt;span&gt;Home&lt;/span&gt;
  
                          &lt;span class="test"&gt;1&lt;/span&gt;
                          &lt;img src="/img/side_arrow.png" height="15" width="15" /&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
  
  
              &lt;!-- original --&gt;
              &lt;!--
              &lt;div class="row"&gt;
  
                      &lt;div class="left-navigation-home"&gt;
                          &lt;span&gt;Home&lt;/span&gt;
  
                          &lt;div class="library-stats-number"&gt;
                              &lt;div class="stat"&gt;
                                  &lt;span class="counter"&gt;1&lt;/span&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
              &lt;/div&gt;
              --&gt;
              &lt;!-- end original --&gt;   
  
  
  
  
  
          &lt;!--&lt;div class="container"&gt;--&gt;
              &lt;div class="row"&gt;
  
                      &lt;div class="left-navigation-school"&gt;
                          &lt;img src="/img/book_library.png" /&gt;
                          &lt;span&gt;School&lt;/span&gt;
                          &lt;span class="test"&gt;1&lt;/span&gt;
  
                      &lt;/div&gt;
  
              &lt;/div&gt;  
  
  
          &lt;!--&lt;div class="container"&gt;--&gt;
              &lt;div class="row"&gt;
  
                      &lt;div class="left-navigation-health"&gt;
                          &lt;img src="/img/health_library.png" /&gt;
                          &lt;span&gt;Health&lt;/span&gt;
                          &lt;span class="test"&gt;1&lt;/span&gt;
                      &lt;/div&gt;
  
              &lt;/div&gt;  
  
  
          &lt;!--&lt;div class="container"&gt;--&gt;
              &lt;div class="row"&gt;
  
                      &lt;div class="left-navigation-community"&gt;
                          &lt;img src="/img/user_library.png" /&gt;
                          &lt;span&gt;Community&lt;/span&gt;
                          &lt;span class="test"&gt;1&lt;/span&gt;
                      &lt;/div&gt;
  
              &lt;/div&gt;  
  
  
          &lt;!--&lt;div class="container"&gt;--&gt;
              &lt;div class="row"&gt;
  
                      &lt;div class="left-navigation-extra"&gt;
                          &lt;img src="/img/extra_library.png" /&gt;
                          &lt;span align="left"&gt;Extracurricular&lt;/span&gt;
                          &lt;span class="test"&gt;1&lt;/span&gt;
                      &lt;/div&gt;
  
              &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- test --&gt;
  &lt;div class="col-xs-6 middle-column"&gt;
  
  &lt;!-- &lt;div class="column-center"&gt;--&gt;
  
          &lt;!--  
              &lt;div class="child color-blue"&gt;
                  &lt;div class="child-header"&gt;
                      &lt;div class="child-info"&gt;
          --&gt;     
                      &lt;!-- OR --&gt;
  
              &lt;!--&lt;div class="library color-blue"&gt;--&gt;
  
      &lt;!-- section for home click! --&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-6"&gt;
                  &lt;div class="home-header"&gt;
                      &lt;div class="library-info"&gt;
                              &lt;h5 class="center-column-heading"&gt;Cleaning
                              &lt;span ng-click="showLibraryDetails()" id="library-btn"&gt;
                                  &lt;img src="/img/drop_arrow_blue.png" height="10" width="10" /&gt;
                              &lt;/span&gt;
                              &lt;/h5&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;!--&lt;/div&gt;--&gt;
              &lt;!--&lt;div class="child-stats"&gt;--&gt;
                  &lt;div class="library-stats" ng-class="{'lib-nav' : active}"&gt;
                      &lt;div class="stat first"&gt;
                          &lt;!--&lt;span class="counter"&gt;&lt;/span&gt;--&gt;
                          &lt;img src="/img/grey_circle.png" height="25" width="25" /&gt;
                          Make Bed
                          &lt;img src="/img/exclaimation.png" height="18" width="18" /&gt;
                      &lt;/div&gt;
                      &lt;div class="stat"&gt;
                          &lt;!--&lt;span class="counter"&gt;&lt;/span&gt;--&gt;
                          &lt;img src="/img/grey_circle.png" height="25" width="25" /&gt;
                          Put toys away
                          &lt;img src="/img/exclaimation.png" height="18" width="18" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!-- test --&gt;
              &lt;div class="col-sm-6"&gt;
                  &lt;div class="library color-blue"&gt;
                      &lt;!--&lt;div class="child-header"&gt;--&gt;
                      &lt;div class="home-header"&gt;
                          &lt;!--&lt;div class="child-info"&gt;--&gt;
                          &lt;div class="library-info"&gt;
  
                              &lt;div class="text"&gt;
                                  &lt;h5 class="center-column-heading"&gt;Test
                                  &lt;img src="/img/drop_arrow.png" height="10" width="10" /&gt;
                                  &lt;/h5&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;!-- end of home section --&gt;
  
  
          &lt;!-- section for SCHOOL TEST click! --&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-6"&gt;
                  &lt;div class="school-header"&gt;
                      &lt;div class="school-info"&gt;
                              &lt;h5 class="school-column-heading"&gt;Cleaning2
                              &lt;span ng-click="showSchoolDetails()" id="school-btn"&gt;
                                  &lt;img src="/img/drop_arrow_pink.png" height="10" width="10" /&gt;
                              &lt;/span&gt;
                              &lt;/h5&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;!--&lt;/div&gt;--&gt;
              &lt;!--&lt;div class="child-stats"&gt;--&gt;
                  &lt;div class="school-stats" ng-class="{'school-nav' : active}"&gt;
                      &lt;div class="stat first"&gt;
                          &lt;!--&lt;span class="counter"&gt;&lt;/span&gt;--&gt;
                          &lt;img src="/img/grey_circle.png" height="25" width="25" /&gt;
                          test1
                          &lt;img src="/img/exclaimation.png" height="18" width="18" /&gt;
                      &lt;/div&gt;
                      &lt;div class="stat"&gt;
                          &lt;!--&lt;span class="counter"&gt;&lt;/span&gt;--&gt;
                          &lt;img src="/img/grey_circle.png" height="25" width="25" /&gt;
                          test2
                          &lt;img src="/img/exclaimation.png" height="18" width="18" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!-- test --&gt;
              &lt;div class="col-sm-6"&gt;
                  &lt;div class="library color-red"&gt;
                      &lt;!--&lt;div class="child-header"&gt;--&gt;
                      &lt;div class="school-header"&gt;
                          &lt;!--&lt;div class="child-info"&gt;--&gt;
                          &lt;div class="library-info"&gt;
  
                              &lt;div class="text"&gt;
                                  &lt;h5 class="school-column-heading"&gt;Test2
                                      &lt;img src="/img/drop_arrow.png" height="10" width="10" /&gt;
                                  &lt;/h5&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;!-- end of school TEST section --&gt;
  
  
  
  
  
  
  
      &lt;!-- second section --&gt;
          &lt;!--&lt;div class="child color-blue"&gt;--&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-6"&gt;
                  &lt;div class="library color-blue"&gt;
                      &lt;!--&lt;div class="child-header"&gt;--&gt;
                      &lt;div class="school-header"&gt;
                          &lt;!--&lt;div class="child-info"&gt;--&gt;
                          &lt;div class="library-info"&gt;
  
                              &lt;div class="text"&gt;
  
                                  &lt;h5 class="center-column-heading"&gt;Pet Care
                                  &lt;img src="/img/drop_arrow.png" height="10" width="10" /&gt;
                                  &lt;/h5&gt;
  
                              &lt;/div&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;!-- Media use row example --&gt;
              &lt;div class="col-sm-6"&gt;
                  &lt;div class="library color-blue"&gt;
                      &lt;!--&lt;div class="child-header"&gt;--&gt;
                      &lt;div class="library-header"&gt;
                          &lt;!--&lt;div class="child-info"&gt;--&gt;
                          &lt;div class="library-info"&gt;
  
                              &lt;div class="text"&gt;
                                  &lt;h5 class="center-column-heading"&gt;Media Use
                                  &lt;img src="/img/drop_arrow.png" height="10" width="10" /&gt;
                                  &lt;/h5&gt;
  
                              &lt;/div&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;!-- third section --&gt;
  
                  &lt;!--&lt;div class="child color-blue"&gt;--&gt;
                  &lt;div class="library color-blue"&gt;
                      &lt;!--&lt;div class="child-header"&gt;--&gt;
                      &lt;div class="library-header"&gt;
                          &lt;!--&lt;div class="child-info"&gt;--&gt;
                          &lt;div class="library-info"&gt;
  
                              &lt;div class="text"&gt;
                                  &lt;h5 class="center-column-heading"&gt;Media Use
                                  &lt;img src="/img/drop_arrow.png" height="10" width="10" /&gt;
                                  &lt;/h5&gt;
  
                              &lt;/div&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
  
  &lt;!--&lt;/div&gt;--&gt;
  &lt;/div&gt;
  
  
  
  &lt;!-- &lt;div class="column-right"&gt;--&gt;
  &lt;div class="col-xs-3"&gt;
  &lt;div  class="column-right"&gt;
  
      &lt;span class="filter-image-right"&gt;
          &lt;img src="/img/clock_library-right.png" /&gt;
          &lt;img src="/img/heart_library-right.png" /&gt;
          &lt;img src="/img/handshake_library-right.png" /&gt;
          &lt;img src="/img/lamp_library-right.png" /&gt;
      &lt;/span&gt;
  
      &lt;div&gt;
      &lt;h6 class="right-column-heading"&gt;&lt;img src="/img/minus.png"/&gt; Cleaning&lt;/h6&gt;
  
      &lt;/div&gt;
          &lt;p&gt;
          The concept of cleaning makes little sense to young children.  For preschoolers,
          instructions like, "Put your toys away" are too vague or abstract.  You need to
          break things down for them.  "Pick up all your blocks and put them in the bin."
          "put your dolls on the bottom shelf."  The specifiity of these instructions is key.
          "Clean your room!" is simply overwhelming.
          &lt;/p&gt;
  
      &lt;h6 class="right-column-heading"&gt;Make Bed&lt;/h6&gt;
  
          &lt;p&gt;
          For a younger child; Focus on smoothing out sheets and blankets for a clear
          playing/sitting surface.
          &lt;/p&gt;
  
      &lt;h6 class="right-column-heading"&gt;test&lt;/h6&gt;
  
          &lt;p&gt;
          The concept of cleaning makes little sense to young children.  For     preschoolers,
          instructions like, "Put your toys away" are too vague or abstract.  You need to
          break things down for them.  "Pick up all your blocks and put them in the bin."
          "put your dolls on the bottom shelf."  The specifiity of these instructions is key.
          "Clean your room!" is simply overwhelming.
          &lt;/p&gt;
  
          &lt;h6 class="right-column-heading"&gt;test2&lt;/h6&gt;
  
          &lt;p&gt;
          The concept of cleaning makes little sense to young children.  For preschoolers,
          instructions like, "Put your toys away" are too vague or abstract.  You need to
          break things down for them.  "Pick up all your blocks and put them in the bin."
          "put your dolls on the bottom shelf."  The specifiity of these instructions is key.
          "Clean your room!" is simply overwhelming.
          &lt;/p&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And the css for the three columns:</p>
  
  <pre><code>.column-left { 
  height:100vh;
  }
  
  .column-right { 
  background-color: #d0d0d0; 
  overflow-y: scroll;
  padding:10px;
  margin-right:-17px;
  height:100vh;
  }
  
  .middle-column{
  height:100vh;
  }
  </code></pre>
  
  <p>EDIT*
  I believe the issue isn't the column div, but the main header div.  It is to the right most part of the webpage.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;div class="container" id="main-content"&gt;
  &lt;div id="content-header" class="assignments"&gt;
  
      &lt;div class="container" &gt;
          &lt;h1&gt;
              Library!!
              &lt;span class="counter"&gt;22&lt;/span&gt;
          &lt;/h1&gt;
      &lt;/div&gt;
      &lt;button type="button" class="btn btn-green btn-lg btn-header" data-toggle="modal" ng-click="newAssignment()"&gt;Save&lt;/button&gt;
      &lt;div id="subheader"&gt;
  
  
          &lt;div class="row"&gt;
  
  
                  &lt;div class="col-sm-6"&gt;
                      &lt;div class="main-label filter-image"&gt;Filter:
                          &lt;img src="/img/clock_library.png" /&gt;
                          &lt;img src="/img/heart_library.png" /&gt;
                          &lt;img src="/img/handshake_library.png" /&gt;
                          &lt;img src="/img/lamp_library.png" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="lib-text"&gt;  
                      &lt;input class="col-sm-5" type="text" name="search"&gt;
                      &lt;img src="/img/magnifying_glass_white.png" /&gt;
                  &lt;/div&gt;  
  
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>and the CSS:</p>
  
  <pre><code>#content-header {
  position: relative;
  margin: auto;
  color: #fff;
  -webkit-border-top-left-radius: 15px;
  -webkit-border-top-right-radius: 15px;
  -moz-border-radius-topleft: 15px;
  -moz-border-radius-topright: 15px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  }
  </code></pre>