[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!

Jos van Weesel · Accepted Answer · 2018-05-12T18:18:13.590

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>

It doesn't work ...I can see here that the code snippet is working , but on my page is not working...I even tried local css and it's still not working — clauu, May 12 '18 at 14:00
Can you maybe put all of your code into a [Codepen](https://codepen.io/pen/) so I can see what the problem is? — Jos van Weesel, May 12 '18 at 14:06
Some other styling in your CSS was overwriting it, so I applied the Flex method to the container, making them stay in the middle and keep their margins. Take a look [» here «](https://codepen.io/SirExotic/pen/WJybZg). I'll apply this in my answer too, and I would appreciate it if you could accept it :) — Jos van Weesel, May 12 '18 at 17:53

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

1 Answers1