2 item rows won't center and don't act as intended
<p>I have this portfolio page I'm working on and for some reason the columns are stuck to the left, margins on auto don't work, float:none doesn't work. I've tried pretty much anything. Anyone know how to fix this?</p>
<p>Problem site in question:
<a href="https://jsfiddle.net/p3jgjnbr/" rel="nofollow noreferrer">https://jsfiddle.net/p3jgjnbr/</a></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.Logo {
  font-size: 20px;
  color: white;
  font-family: Monospace;
  -webkit-transition: all ease 0.2s;
  -moz-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
  transition: all ease 0.2s;
}
.Intro-Nav {
  margin-bottom: 50px;
}
#Logo:hover {
  font-size: 20px;
  color: green;
  font-family: Monospace;
  background-color: white;
  border-color: white;
  border-bottom: solid green;
}
#Navlist li {
  -moz-transition: all ease 0.2s -o-transition: all ease 0.2s;
  -webkit-transition: all ease 0.2s;
  transition: all ease 0.2s;
  font-family: Monospace;
  font-size: 20px;
}
#Navlist li:hover {
  background-color: green;
  font-family: Monospace;
  border-bottom: solid white;
}
.slight-round {
  border-radius: 10px;
}
.Anon {
  width: 400px;
  border-radius: 200px;
}
#ImgWrap {
  padding-top: 50px;
}
.About {
  padding-left: 20px;
  padding-bottom: 30px;
  background-color: white;
  margin-top: 60px;
  border-left: thick solid #ff0000;
  font-family: Monospace;
  font-size: ?px;
}
#Portfolio {
  padding-top: 50px;
}
.Projects {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
#row1 div p {
  max-width: 306px;
  background-color: lightgrey;
  border-color: lightgrey;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding-left: 5px;
}
#row2 div p {
  max-width: 306px;
  background-color: lightgrey;
  border-color: lightgrey;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding-left: 5px;
}
#row3 div p {
  max-width: 306px;
  background-color: lightgrey;
  border-color: lightgrey;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding-left: 5px;
}
#row1 div img {
  border: lightgrey solid;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
#row2 div img {
  border: lightgrey solid;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
#row3 div img {
  border: lightgrey solid;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
#Me {
  padding-bottom: 20px;
  padding-top: 50px;
}
.Background1 {
  background: url("https://40.media.tumblr.com/1b916597d3e174399cb7adadddb66ede/tumblr_nt5uk4psl31ud7rr3o1_1280.jpg") center center fixed;
  background-size: cover;
  height: 700px;
  text-align: center;
  padding-bottom: 50px;
}
.Background2 {
  background: url("http://assets.inhabitat.com/wp-content/blogs.dir/1/files/2015/12/Wind-Turbine-at-Sunset.jpg") center center fixed;
  height: ?px;
  text-align: center;
  padding-bottom: 50px;
}
.SocialMedia {
  background-color: lightgrey;
}
.SocialButtons {
  padding: 30px 30px;
  padding-bottom: 100px;
}
.Head1 {
  display: table;
  margin: 0 auto;
}
.Head1 p {
  font-family: Monospace;
  font-size: 25px;
  padding: 0px 0px;
  margin: 0px 0px;
}
.btn-circle.btn-xl {
  background-position: center;
  position: relative;
  width: 100px;
  height: 100px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 65px;
  -moz-transition: all ease 0.2s;
  -webkit-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
  transition: all ease 0.2s;
}
.btn-circle.btn-xl:hover {
  width: 155px;
  height: 100px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
}
.btn-circle.btn-xl:hover .btnDes {
  visibility: visible;
  opacity: 1;
}
.btnDes {
  position: absolute;
  padding-top: 45px;
  font-size: 20px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
  -moz-transition: all ease 0.2s;
  transition: all ease 0.2s;
}
.btnWrap:hover .btnDes {
  visibility: visible;
  opacity: 1;
}
.SocialMed {
  border-bottom: solid black;
}
.CntMeBtn {
  font-size: 1.7em;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;script src="https://code.jquery.com/jquery-2.2.4.min.js"&gt;&lt;/script&gt;
&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /&gt;
&lt;link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet" /&gt;
&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" /&gt;
&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /&gt;

&lt;body&gt;
  &lt;div class="Background1 container-fluid"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="navbar navbar-inverse navbar-fixed-top Intro-Nav"&gt;
        &lt;div class="container"&gt;
          &lt;a href="#" class="navbar-brand Logo" id="Logo"&gt;
        StruckCroissant
      &lt;/a&gt;
          &lt;button class="navbar-toggle slight-round" type="button" data-toggle="collapse" data-target=".navHeaderCollapse"&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;div class="collapse navbar-collapse navHeaderCollapse"&gt;
            &lt;ul class="nav navbar-nav navbar-right" id="Navlist"&gt;
              &lt;li&gt;&lt;a href="#Me"&gt;About Me&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#Portfolio"&gt;Portfolio&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#Contact"&gt;Contact Me&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container-fluid" id="Me"&gt;
        &lt;div class="row" id="AbtRow1"&gt;
          &lt;div class="col-md-12 col-sm-12" id="ImgWrap"&gt;
            &lt;img src="http://67.media.tumblr.com/0a049264fba0072a818f733a6c533578/tumblr_mqvlz4t5FK1qcnibxo1_540.png" class="Anon"&gt;
            &lt;p class="anon"&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row" id="AbtRow2"&gt;
          &lt;div class="col-md-12 col-sm-12"&gt;
            &lt;p class="About"&gt;
              Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
              Blah Blah Blah&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="Background2" id="Portfolio"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="row row-centered" id="row1"&gt;
        &lt;div class="col-md-6 col-centered"&gt;
          &lt;img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive"&gt;
          &lt;p&gt;Go ahead and guess what this picture is...Thats right! A filler!&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col-md-6 col-centered"&gt;
          &lt;img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive"&gt;
          &lt;p&gt;Being a filler is hard sometimes, but, at least im not looking at one...Oh wait!&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row row-centered" id="row2"&gt;
        &lt;div class="col-md-6 col-centered"&gt;
          &lt;img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive"&gt;
          &lt;p&gt;Go ahead and guess what this picture is...Thats right! A filler!&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col-md-6 col-centered"&gt;
          &lt;img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive"&gt;
          &lt;p&gt;Being a filler is hard sometimes, but, at least im not looking at one...Oh wait!&lt;/p&gt;

        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row row-centered" id="row3"&gt;
        &lt;div class="col-md-6 col-centered"&gt;

          &lt;img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive"&gt;
          &lt;p&gt;If you make it to the end of these fillers i might just give you a treat!&lt;/p&gt;

        &lt;/div&gt;
        &lt;div class="col-md-6 col-centered"&gt;
          &lt;div class="Portfolio-content"&gt;
            &lt;img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive"&gt;
            &lt;p&gt;I looked in the cupboards but alas, the treats were nowhere to be found&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="SocialMedia" id="Contact"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-12 SocialMed"&gt;
        &lt;div class="Head1"&gt;
          &lt;p&gt;Contact Me&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="row row-centered SocialButtons"&gt;
        &lt;div class="col-md-3 col-sm-3"&gt;
          &lt;a href="https://www.facebook.com/arduino12345" class="btn btn-primary btn-circle btn-xl"&gt;&lt;i class="fa fa-facebook fa-fw Fb CntMeBtn"&gt;&lt;/i&gt;&lt;p class="btnDes"&gt;Facebook&lt;/p&gt;&lt;/a&gt;

        &lt;/div&gt;
        &lt;div class="col-md-3 col-sm-3"&gt;

          &lt;a href="https://www.facebook.com/arduino12345" class="btn btn-primary btn-circle btn-xl Fire"&gt;&lt;i class="fa fa-fire fa-fw Fb CntMeBtn"&gt;&lt;/i&gt;&lt;p class="btnDes"&gt;FreeCodeCamp&lt;/p&gt;&lt;/a&gt;

        &lt;/div&gt;
        &lt;div class="col-md-3 col-sm-3"&gt;

          &lt;a href="https://www.facebook.com/arduino12345" class="btn btn-primary btn-circle btn-xl"&gt;&lt;i class="fa fa-linkedin fa-fw Fb CntMeBtn"&gt;&lt;/i&gt;&lt;p class="btnDes"&gt;LinkedIn&lt;/p&gt;&lt;/a&gt;

        &lt;/div&gt;
        &lt;div class="col-md-3 col-sm-3"&gt;

          &lt;a href="https://github.com/StruckCroissant" class="btn btn-primary btn-circle btn-xl"&gt;&lt;i class="fa fa-github fa-fw Fb CntMeBtn"&gt;&lt;/i&gt;&lt;p class="btnDes"&gt;Github&lt;/p&gt;&lt;/a&gt;

        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>
<p>as you can plainly see all of the placeholder pictures and social media buttons are left aligned, I appreciate every bit of help. Thank you!</p>