How to centre class='wrap'

I'm currently working on my portfolio page and I've encountered some problems. How can I centre the portfolio part and still maintain its appearance (3 columns)?

HTML code:

<div class="wrap" style="background-color:#FAFAFA; height: 850px;">
      <div id="portfolio-container"class="portfolio" style="position: relative; height:850px; left:6%; right: 6%;">
        <div class="word" style="position: absolute; left:355px;">
          <h1> P O R T F O L I O </h1>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="position: absolute; left: 7px; top:100px;">
          <div class="hovereffect">
            <a href="websitelink">
              <img class="img-responsive" width="300" height="250" src="http://ift.tt/2c6d56C" alt="">
              <div class="overlay">
                <h2>itemname</h2>
              </div>
          </div>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="position: absolute; left: 325px; top:100px;">
          <div class="hovereffect">
             <a href="websitelink">
              <img class="img-responsive" width="300" src="http://ift.tt/2bNxLUC" alt="">
              <div class="overlay">
                <h2>itemname</h2>
              </div>
          </div>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="position: absolute; left: 640px; top:100px;">
          <div class="hovereffect">
             <a href="websitelink">
              <img width="300" class="img-responsive" src="http://ift.tt/2c6dDJx" alt="">
              <div class="overlay">
                <h2>itemname</h2>
              </div>
          </div>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="position: absolute; left: 7px; top:370px;">
          <div class="hovereffect">
             <a href="websitelink">
              <img width="300" class="img-responsive" src="http://ift.tt/2bNzMQi" alt="">
              <div class="overlay">
                <h2>itemname</h2>
              </div>
          </div>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="position: absolute; left: 325px; top:520px;">
          <div class="hovereffect">
             <a href="websitelink">
              <img width="300" class="img-responsive" src="http://ift.tt/2c6d4zz" alt="">
              <div class="overlay">
                <h2>itemname</h2>
              </div>
          </div>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="position: absolute; left: 640px; top:350px;">
          <div class="hovereffect">
             <a href="websitelink">
              <img width="300" class="img-responsive" src="http://ift.tt/2bNytRr" alt="">
              <div class="overlay">
                <h2>itemname</h2>
              </div>
          </div>
        </div>

      </div>

CSS Code (Didn't include the hover image part)

.portfolio {
  list-style: none;
  font-size: 0px;
  width: 96%;
  margin-left: 15.5%;
}

Thank you very much for your help.