0

I am currently making a staff section on my website and i'm having trouble centering it. Anyone have a idea on how to center everything? It was originally made for four staff but I removed one and I can't seem to center everything correctly without messing everything up.

You can view it here.

The HTML:

<!--Team-->
<section class="content-block white" id="team">
    <div class="container">
    <div class="row animation" data-animation="fadeInUp"><!--By adding/removing class "animation" we enable/disable scroll animation of current element-->
        <h1>The Team</h1>
      <h2>The People Behind It All</h2>
    </div>
    <div class="row">
        <div class="col-lg-3 col-md-6 col-sm-6 animation" data-animation="fadeInLeft"><!--By adding/removing class "animation" we enable/disable scroll animation of current element-->
        <div class="team">
          <img src="img/Jordan.jpg" width="248" height="248" alt="Dexter Kirk"/>
          <h2>Jordan<br/>Berger</h2>
          <h3>Title</h3>
          <div class="social-icons si-icon-effect">
            <a href="#" class="si-icon fa fa-facebook">Facebook</a>
            <a href="#" class="im-icon-m icon-google-plus-ios">Google Plus</a>
            <a href="#" class="im-icon-l icon-instagram-ios">Instagram</a>
          </div>
        </div>
      </div>
        <div class="col-lg-3 col-md-6 col-sm-6 animation" data-animation="fadeInLeft"><!--By adding/removing class "animation" we enable/disable scroll animation of current element-->
        <div class="team">
          <img src="img/Allan.jpg" width="248" height="248" alt="Richard Roe"/>
          <h2>Allan<br/>Maman</h2>
          <h3>Title</h3>
          <div class="social-icons si-icon-effect">
            <a href="#" class="si-icon fa fa-facebook">Facebook</a>
            <a href="#" class="im-icon-m icon-google-plus-ios">Google Plus</a>
            <a href="#" class="im-icon-l icon-instagram-ios">Instagram</a>
          </div>
        </div>
      </div>
        <div class="col-lg-3 col-md-6 col-sm-6 animation" data-animation="fadeInRight"><!--By adding/removing class "animation" we enable/disable scroll animation of current element-->
        <div class="team">
          <img src="img/Cooper.jpg" width="248" height="248" alt="Anna Lobzenko"/>
          <h2>Cooper<br/>Weiss</h2>
          <h3>Title</h3>
          <div class="social-icons si-icon-effect">
            <a href="#" class="si-icon fa fa-facebook">Facebook</a>
            <a href="#" class="im-icon-m icon-google-plus-ios">Google Plus</a>
            <a href="#" class="im-icon-l icon-instagram-ios">Instagram</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

The CSS:

    /*Team*/
.team {
    width: 100%;
    margin-bottom: 40px;
}
.team img {
    display: block;
    margin: 0 auto 30px auto;
    border: 5px solid transparent;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}
.team h2,
.team h3 {
    margin-bottom: 25px;
}
.team .social-icons {
    display: table;
    margin: 0 auto;
}
.team .si-icon,
.team .im-icon-s,
.team .im-icon-m,
.team .im-icon-l {
    margin: 15px 33px 0 0;
    color: #999;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}
.team:hover img {
    border: 5px solid #fff;
}
.team .si-icon-effect .si-icon,
.team .si-icon-effect .im-icon-s,
.team .si-icon-effect .im-icon-m,
.team .si-icon-effect .im-icon-l {
    box-shadow: 0 0 0 1px #999;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}
.team:hover .si-icon,
.team:hover .im-icon-s,
.team:hover .im-icon-m,
.team:hover .im-icon-l {
    color: #666;
}
.team:hover .si-icon-effect .si-icon,
.team:hover .si-icon-effect .im-icon-s,
.team:hover .si-icon-effect .im-icon-m,
.team:hover .si-icon-effect .im-icon-l {
    box-shadow: 0 0 0 1px #666;
}
0

2 Answers 2

3

All you need to do is change the column size on col-lg-x screen of each person container

<div class="col-lg-3 col-md-6 col-sm-6 animation"...> to be <div class="col-lg-4 col-md-6 col-sm-6 animation"...>

1

I made some change on your code, Check this:

<!--Team-->
<section class="content-block white" id="team">
<div class="container">
<div class="row animation" data-animation="fadeInUp"><!--By adding/removing class "animation" we enable/disable scroll animation of current element-->
    <h1>The Team</h1>
  <h2>The People Behind It All</h2>
</div>
<div class="row">
    <div class="col-lg-4 col-md-6 col-sm-6 animation" data-animation="fadeInLeft"><!--By adding/removing class "animation" we enable/disable scroll animation of current element-->
    <div class="team">
      <img src="img/Jordan.jpg" width="248" height="248" alt="Dexter Kirk"/>
      <h2>Jordan<br/>Berger</h2>
      <h3>Title</h3>
      <div class="social-icons si-icon-effect">
        <a href="#" class="si-icon fa fa-facebook">Facebook</a>
        <a href="#" class="im-icon-m icon-google-plus-ios">Google Plus</a>
        <a href="#" class="im-icon-l icon-instagram-ios">Instagram</a>
      </div>
    </div>
  </div>
    <div class="col-lg-4 col-md-6 col-sm-6 animation" data-animation="fadeInLeft"><!--By adding/removing class "animation" we enable/disable scroll animation of current element-->
    <div class="team">
      <img src="img/Allan.jpg" width="248" height="248" alt="Richard Roe"/>
      <h2>Allan<br/>Maman</h2>
      <h3>Title</h3>
      <div class="social-icons si-icon-effect">
        <a href="#" class="si-icon fa fa-facebook">Facebook</a>
        <a href="#" class="im-icon-m icon-google-plus-ios">Google Plus</a>
        <a href="#" class="im-icon-l icon-instagram-ios">Instagram</a>
      </div>
    </div>
  </div>
    <div class="col-lg-4 col-md-6 col-sm-6 animation" data-animation="fadeInRight"><!--By adding/removing class "animation" we enable/disable scroll animation of current element-->
    <div class="team">
      <img src="img/Cooper.jpg" width="248" height="248" alt="Anna Lobzenko"/>
      <h2>Cooper<br/>Weiss</h2>
      <h3>Title</h3>
      <div class="social-icons si-icon-effect">
        <a href="#" class="si-icon fa fa-facebook">Facebook</a>
        <a href="#" class="im-icon-m icon-google-plus-ios">Google Plus</a>
        <a href="#" class="im-icon-l icon-instagram-ios">Instagram</a>
      </div>
    </div>
  </div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.