How to center multiple divs within a section? - html

Question

I know there is an existing question none of the solutions seem to work for me and it's a question posted in 2014.
Here's the code I have:
<section id="team-block">
<div class="team-block-centered">
<div class="col-lg-3 col-sm-6 member-1">
<div class="team-member">
<img
src="http://lvsmiledesigners.com/new/wp-content/uploads/2019/06/dr-tongsiri.jpg"
data-original="http://lvsmiledesigners.com/new/wp-content/uploads/2019/06/dr-tongsiri.jpg"
alt=""
class="lazy"
style="display: block;"
/>
<div class="inner">
<h4 class="name">Dr. Amy Tongsiri</h4>
<p class="position">
<small>Clinical Director</small>
</p>
</div>
<div class="hover">
<div class="description">
<p>
Dr. Amy Tongsiri has joined Smile Designers of Las Vegas in 2017.
She has a joyous energy vibrating the room as she enters. Almost
permanently smiling, she exudes positivity and can easily relaxed
and soothe a nervous patient. The desire to pursue a career in
dentistry came young for Dr. Tongsiri, during the course of her
own dental health. "I originally wanted to do orthodontics, when I
had braces,” she says, flashing the resulting perfect smile. “But
eventually, I found General Dentistry to be more exciting because
you are challenged by being able to cover everything."
</p>
</div>
<div class="read-more">
<a href="/new/dr-amy-tongsiri/" class="button white outline"
>Read more <span class="nc-icon-glyph arrows-1_bold-right"></span
></a>
</div>
</div>
<!--.hover-->
</div>
<!--.team-member-->
</div>
<!--.col-lg-3-->
</div>
<div class="col-lg-3 col-sm-6 member-2">
<div class="team-member">
<img
src="http://lvsmiledesigners.com/new/wp-content/uploads/2019/07/Dr-Dominique-Dela-Cruz.jpg"
data-original="http://lvsmiledesigners.com/new/wp-content/uploads/2019/07/Dr-Dominique-Dela-Cruz.jpg"
alt=""
class="lazy"
style="display: block;"
/>
<div class="inner">
<h4 class="name">Dr. Dominique Dela Cruz</h4>
<p class="position">
<small>Lead Dentist</small>
</p>
</div>
<div class="hover">
<div class="description">
<p>
Providing comprehensive dental care that is tailored to each and
every patient’s needs is Dr. Dominique Dela Cruz’s goal when it
comes to treating patients. She strives to provide dental care in a
comfortable environment while using the most innovative and advanced
technology. Dr. Dela Cruz grew up in Las Vegas, NV. On her spare
time, she likes to stay outdoors as much as possible. She loves to
hike, travel, kayak and snowboard. She also likes to read books and
watch movies with her dogs. Like most of her patients, Dr. Dela Cruz
has a sweet tooth and enjoys eating candy, chocolate and other
pastries.
</p>
</div>
<div class="read-more">
<a href="/new/dr-jorge-jimenez-marquez/" class="button white outline"
>Read more <span class="nc-icon-glyph arrows-1_bold-right"></span
></a>
</div>
</div>
<!--.hover-->
</div>
<!--.team-member-->
</div>
<!--.col-lg-3-->
<div class="col-lg-3 col-sm-6 member-3">
<div class="team-member">
<img
src="http://lvsmiledesigners.com/new/wp-content/uploads/2019/06/karla.jpg"
data-original="http://lvsmiledesigners.com/new/wp-content/uploads/2019/06/karla.jpg"
alt=""
class="lazy"
style="display: block;"
/>
<div class="inner">
<h4 class="name">Karla Brown</h4>
<p class="position">
<small>Office Manager</small>
</p>
</div>
<div class="hover">
<div class="description">
<p>
Delivering outstanding customer service has always been an essential
part of a day’s work for Karla. As Smile Designers of Las Vegas
Office Manager, she is responsible for all office procedures, and
uses her organizational skills to ensure smooth operations in a busy
work environment.
</p>
</div>
<div class="read-more">
<a href="/new/nancy-gutierrez/" class="button white outline"
>Read more <span class="nc-icon-glyph arrows-1_bold-right"></span
></a>
</div>
</div>
<!--.hover-->
</div>
<!--.team-member-->
</div>
<!--.col-lg-3-->
<div class="col-lg-3 col-sm-6 member-4">
<div class="team-member">
<img
src="http://lvsmiledesigners.com/new/wp-content/uploads/2019/06/nancy.jpg"
data-original="http://lvsmiledesigners.com/new/wp-content/uploads/2019/06/nancy.jpg"
alt=""
class="lazy"
style="display: block;"
/>
<div class="inner">
<h4 class="name">Nancy Gutierrez</h4>
<p class="position">
<small>Lead Back Office Assistant</small>
</p>
</div>
<div class="hover">
<div class="description">
<p>
As Smile Designers of Las Vegas lead dental assistant she says her
coworkers and easy-going patients make it a pleasure to go to work
every day. She loves been a part in patients journeys to a better
and healthier oral health.
</p>
</div>
<div class="read-more">
<a href="/new/karla-brown/" class="button white outline"
>Read more <span class="nc-icon-glyph arrows-1_bold-right"></span
></a>
</div>
</div>
<!--.hover-->
</div>
<!--.team-member-->
</div>
<!--.col-lg-3-->
</section>
Here's the live site: http://lvsmiledesigners.com/new/
The section is under the "Our team can help you!" header. The concern I have is Dr. Amy's div. I'm not sure why Dr. Amy's image is narrower in width than the other images.

Answer 1

[Update]: You should wrap all the doctors column with .team-block-centered to positioning them center. In your demo live site - you only wrap Dr. Amy div.
See your code, all the element with col-lg-3 class aren't siblings, instead Dr. Amy div element nested in .team-block-centered element. And thats the main reason. If you remove parent wrapper with class .team-block-centered, everything will be fine.
[Previous]:
.team-block-centered parent wrapper class has width 900px. And col-lg-3 class take the width of 20%(234px in this case).
The problem is you have 4 column width of 20% * 4 = 80%(234 * 4 = 936px), which is greater than parent wrapper width.
Give .team-block-centered class width: 100% , and then center it.

Answer 2

In other words image is very short in width = 173px original, it should more than 204px.