CSS nth-of-type margins with BS

Question

I am trying to have a three column section that has three different divs, each containing an h2 and a p element. I want to make the left when align right, the middle one align center and the right one align left. I achieved this using nth-of-type however I can't figure out how to get them in the right position so that everything lines up with each other.

body {
  background-color: #EAE8EB;
}

wrap {
  margin: auto;
}

#topbar {
  width: 105%;
  height: 50px;
  background-color: #000;
  margin-left: -2.5%;
  margin-top: -10px;
}

#jumbotron {
    width: 105%;
    margin-left: -2.5%;
    height: 900px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('http://www.arcanemarketing.com/wp-content/uploads/2013/05/placeholder.png');
}

#recent {
    margin: auto;
    background-color: #3C5F7C;
    width: 105%;
    margin-left: -2.5%;
    height: 250px;
    margin-top: -20px;
}

#recent h1 {
    text-align: center;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 38px;
    font-weight: 700;
    padding-top: 10px;
    color: #EEF0F2;
}

#galleries {
    width: 105%;
    margin-left: -2.5%;
    height: 250px;
    background-color: #3c5f7c;
}

#galleries h2 {
    font-size: 32px;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-weight: 500;
    color: #EEF0F2;
}

#galleries div:nth-of-type(1) h2 {
    text-align: right;
}
#galleries div:nth-of-type(2) h2 {
    text-align: center;
}

#galleries div:nth-of-type(3) h2 {
    text-align: left;
}

#galleries p {
    font-size: 18px;
    font-family: 'Catamaran', sans-serif;
    font-weight: 300;
    color: #eef0f2;
    max-width: 360px;
}

#galleries div:nth-of-type(1) p {
    text-align: right;
    margin: auto;
}

#galleries div:nth-of-type(2) p {
    text-align: center;
    margin: auto;
}

#galleries div:nth-of-type(3) p {
    text-align: left;
    margin: auto;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,500,700,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Catamaran:400,300,500' rel='stylesheet' type='text/css'>


<div id="wrap">

<div id="topbar">
</div>

<div id="menu">
</div>

<div id="logo">
</div>

<div id="jumbotron">
</div>

<div id="recent">
    <h1>Recent Work</h1>
    <div id="thumbnail"></div>

</div>

<div id="galleries">
<div class="row">
    <div class="col-md-4">
    <h2>Website Design</h2>
    <p>Extensive experience with image editing software, html and css code, and a unique perspective of an IT major formerly in graphic design.</p>
    </div>

    <div class="col-md-4">
    <h2>Software Engineering</h2>
    <p>Information Technology second-semester Sophomore at State University of New York at Cobleskill. Passion for solving problems with logic and code.</p>
    </div>

    <div class="col-md-4">
    <h2>Other Work</h2>
    <p>Former graphic artist with a background in a hobbyist form of art known as forum signatures.</p>
    </div>
</div>
</div>

<div id="sn">
</div>

</div>

Also I'm not sure how to get bootstrap to work in jsfiddle sorry :( https://jsfiddle.net/5bep97xw/

Answer 1

The nth-child idea is the good one. but looks like you need to update the mediaqueries too and what is this 105% width ?

body {
  background-color: #EAE8EB;
}

wrap {
  margin: auto;
}

#topbar {
  /* width: 105%;  why ? */
  height: 50px;
  background-color: #000;
  margin-left: -2.5%;
  margin-top: -10px;
}

#jumbotron {
    /* width: 105%;
    margin-left: -2.5%;
    height: 900px; why ? */
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('http://www.arcanemarketing.com/wp-content/uploads/2013/05/placeholder.png');
}

#recent {
    margin: auto;
    background-color: #3C5F7C;
    /* width: 105%;
    margin-left: -2.5%;
    height: 250px; why ? */
    margin-top: -20px;
}

#recent h1 {
    text-align: center;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 38px;
    font-weight: 700;
    padding-top: 10px;
    color: #EEF0F2;
}

#galleries {
    /* width: 105%;
    margin-left: -2.5%;
    min-height: 250px;  do not fix an height and not too sure about margins and width */
    background-color: #3c5f7c;
}

#galleries h2 {
    font-size: 32px;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-weight: 500;
    color: #EEF0F2;
}

#galleries div:nth-of-type(1) h2 {
    text-align: right;
}
#galleries div:nth-of-type(2) h2 {
    text-align: center;
}

#galleries div:nth-of-type(3) h2 {
    text-align: left;
}

#galleries p {
    font-size: 18px;
    font-family: 'Catamaran', sans-serif;
    font-weight: 300;
    color: #eef0f2;
    /* max-width: 360px; better fix a max-width on parents container ? */
    padding:1em;/* might be usefull */
    margin:0;/* might be usefull */
}

#galleries div:nth-of-type(1) p {
    text-align: right;
    margin: auto;
}

#galleries div:nth-of-type(2) p {
    text-align: center;
    margin: auto;
}

#galleries div:nth-of-type(3) p {
    text-align: left;
    margin: auto;
}
   @media (max-width:990px){
   div div#galleries div[class] p,
   div div#galleries div[class] h2 {
      text-align:center; /* or left or right */
  }
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,500,700,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Catamaran:400,300,500' rel='stylesheet' type='text/css'>


<div id="wrap">

<div id="topbar">
</div>

<div id="menu">
</div>

<div id="logo">
</div>

<div id="jumbotron">
</div>

<div id="recent">
    <h1>Recent Work</h1>
    <div id="thumbnail"></div>

</div>

<div id="galleries">
<div class="row">
    <div class="col-md-4">
    <h2>Website Design</h2>
    <p>Extensive experience with image editing software, html and css code, and a unique perspective of an IT major formerly in graphic design.</p>
    </div>

    <div class="col-md-4">
    <h2>Software Engineering</h2>
    <p>Information Technology second-semester Sophomore at State University of New York at Cobleskill. Passion for solving problems with logic and code.</p>
    </div>

    <div class="col-md-4">
    <h2>Other Work</h2>
    <p>Former graphic artist with a background in a hobbyist form of art known as forum signatures.</p>
    </div>
</div>
</div>

<div id="sn">
</div>

</div>