Lining up bootstrap rows and spacing between divs within a column

Lining up bootstrap rows and spacing between divs within a column
0

#1

I’m working on the first project from FreeCodeCamp, and it’s to make a tribute page to a notable individual. I am doing one on a female hockey player.

My problem is that I want her career acheivements section to be next to her biographical information, and line up with the sections above them.

Here’s the section of code I can’t seem to fix:

 <div class="row col-xs-6">
      <div id="biographical-info" style="padding: 5px 5px 5px 5px;" class="bio content-frame">
        <b>Birthdate:</b> March 28, 1991
        <br>
        <b>Birthplace:</b> Beauceville, QC, CANADA
        <br>
        <b>Position:</b> Forward
        <br>
        <b>Playing Career:</b> 2007–present
        <br>
        <b>Shoots:</b> Left
        <br>
        <b>National Team:</b> Canada
      </div>
      <div class="col-xs-6">
        <div id="career" style="padding: 5px 5px 5px 5px;" class="career content-frame">
          <h3>
            <u>Notable Career Acheivements:</u>
          </h3>
          <p>
            <u>World Under-18 Championships:</u>
            <br>
            <b>Silver</b> (2008)
          </p>
          <p>
            <u>World Championships:</u>
            <br>
            <b>Gold</b> (2012), <b>Silver</b> (2009, 2011, 2013, 2015, 2016, 2017)
          </p>
          <p>
            <u>Winter Olympics:</u>
            <br>
            <b>Gold</b> (2010, 2014)
          </p>
        </div>
      </div>
    </div>

#2

Try changing your CSS to:

.content-frame {
  background-color: #f34d57;
  border-style: double;
  text-align: center;
  border-width: 6px;
}
#biographical-info {
  margin-left: 15px;
  margin-right: -15px;
}
#career {
  margin-left:-15px;
  margin-right:-15px;
}

and starting at your comment for the bio and achievement section, you need to replace all of your existing HTML below all the way to the bottom with:

  <!-- This is where her biographical information goes, as well as her career acheivements -->
  <div class="row">
    <div id="biographical-info" class="col col-6 content-frame bio">
      <b>Birthdate:</b> March 28, 1991<br>
      <b>Birthplace:</b> Beauceville, QC, CANADA<br>
      <b>Position:</b> Forward<br>
      <b>Playing Career:</b> 2007–present<br>
      <b>Shoots:</b> Left<br>
      <b>National Team:</b> Canada
    </div>
    <div id="career" class="col col-6 content-frame career">
      <h3><u>Notable Career Acheivements:</u></h3>
      <p>
        <u>World Under-18 Championships:</u><br>
        <b>Silver</b> (2008)
      </p>
      <p>
        <u>World Championships:</u>
        <br>
        <b>Gold</b> (2012), <b>Silver</b> (2009, 2011, 2013, 2015, 2016, 2017)
      </p>
      <p>
        <u>Winter Olympics:</u>
        <br>
        <b>Gold</b> (2010, 2014)
      </p>
    </div>
  </div>
</div>