[HTML][CSS] Div containing another 3 divs won't center

Question

I am having another problem with one of my div containers. I tried every way to fix it but couldn't see the issue so this is why I am posting here again.

I have a big div container that has another 3 divs inside , and I can't find a way to center the big div...

Hope I pasted the html and css codes right , it gets confusing when I have to tap on space for each line lol

<div class="section3 center">

<div class="section3Container center">

    <div class="person" style="float:left">
        <blockquote>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
        </blockquote>
        <img src="images/nicholas.png" width="150px">
        <h4>Placeholder_Name</h4>
    </div>

    <div class="person">
        <blockquote>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
        </blockquote>
        <img src="images/rebeca.png" width="150px">
        <h4>Placeholder_Name</h4>
    </div>

    <div class="person">
        <blockquote>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
        </blockquote>
        <img src="images/gloria.png" width="150px">
        <h4>Placeholder_Name</h4>
    </div>



   </div>
</div>

 ----CSS----
.section3 {
  width:50%;
  height:500px;
  background-color:#adaba7;
}

.section3Container {
  margin-top:50px;  
}

.person {
  width:30%;
  float:left;
}

.person img {
  display:table;
  margin:0 auto;
  margin-bottom:30px;
 }

.person h4 {
  text-align:center;
}

blockquote{
  text-align:center;
  font-size:15px;
  font-style:italic;
  color: #555555;
  padding:17px 15px;
  border-left:8px solid #b19530; 
  position: relative;
  background:#e2e1dc;
  border-radius:50px;
  margin-bottom:20px;

}

blockquote::before{
  content: "\201C";
  color:#b19530;
  font-size:4em;
  position: absolute;
  left: 10px;
  top:-10px;
}

blockquote::after{
  content: '';
}

And this is the picture guys.Thanks!

Answer 1

Updated my answer because of extra information - see comments for the discussion and relevant changes.

I've used Flex box to center the testimonials evenly.

* {
  margin: 0;
  padding: 0;
  border: 0 none;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

html {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0 none;
}

.center {
  display: table;
  margin: auto;
}

.section3 {
  width: 50%;
  background-color: #adaba7;
}

.section3 p {
  color: white;
  text-align: center;
  font-size: 30px;
  margin-top: 30px;
  font-weight: bold;
}

.section3Container {
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.person {
  width: 30%;
  margin-bottom: 30px;
}

.person img {
  display: table;
  margin: 0 auto;
  margin-bottom: 30px;
}

.person h4 {
  text-align: center;
  color: white;
  font-size: 18px;
}

blockquote {
  text-align: center;
  font-size: 15px;
  font-style: italic;
  color: #555555;
  padding: 17px 15px;
  border-left: 8px solid #b19530;
  position: relative;
  background: #e2e1dc;
  border-radius: 50px;
  margin-bottom: 20px;
}

blockquote::before {
  content: "\201C";
  color: #b19530;
  font-size: 4em;
  position: absolute;
  left: 10px;
  top: -10px;
}

blockquote::after {
  content: '';
}

<div class="section3 center">
  <p>Testimonials</p>

  <div class="section3Container">

    <div class="person">
      <blockquote>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </blockquote>
      <img src="images/nicholas.png" width="150px">
      <h4>Placeholder_Name</h4>
    </div>

    <div class="person">
      <blockquote>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </blockquote>
      <img src="images/rebeca.png" width="150px">
      <h4>Placeholder_Name</h4>
    </div>

    <div class="person">
      <blockquote>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </blockquote>
      <img src="images/gloria.png" width="150px">
      <h4>Placeholder_Name</h4>
    </div>

  </div>
</div>