Having trouble horizontally centering div within another div

Question

I'm trying to have the div with id "team" be horizontally centered inside of its parent div, but it looks like the picture below. I thought that having margin-left and margin-right being 50% would do the trick, but that doesn't seem to be the case. What am I doing wrong?

HTML:

<div id="clients">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2>Get To Know Us</h2>
                    <div id="team">
                        <ul>
                          <li><img src="images/randy.jpg" class="img-responsive" alt=""/>Randy Flug</li>
                          <li><img src="images/alec.jpg" class="img-responsive" alt=""/>Alec Tuckey</li>
                       </ul>
                    </div>

                </div>
            </div>
        </div>
    </div>

Relevant CSS:

#clients {
    padding: 40px 0;
    background: #333;
}

#clients h3 {
    margin: 0px 0px 30px;
    font-size: 30px;
    font-weight: 300;
    text-transform: uppercase;
    text-align: center;
}

#clients ul {
    padding: 0px 0px;
    margin: 0 -25px;
}

#clients ul li {
    float: left;
    margin: 0;
    list-style: none;
    width: 20%;
    position: relative;
    overflow: hidden;
    padding: 0 15px;
}

#clients ul li img {
    opacity: 0.2;
    transition: 0.4s;
    -webkit-transition: 0.4s;
}

#clients ul li:hover img {
    opacity: 1;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -webkit-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1);
    transform: scale(1.1,1.1);
}

.shots .col-md-12 {
    max-width: 90%;
    margin: 0 auto;
    float: none;
}

#team{
    text-align: center;
    margin-left: 50%;
    margin-right: 50%;
    width: 100rem;
    text-decoration-color: white;
    color: white;
}

Answer 1

Is this what you wanted? DEMO

CSS

html { box-sizing: border-box; font: 16px/1.45 Consolas; }
*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; border: 0; }
#clients {
    background: #333;
}
#clients h2 {
    color: #efefef;
}
#clients h3 {
    margin: 0px 0px 30px;
    font-size: 30px;
    font-weight: 300;
    text-transform: uppercase;
    text-align: center;
    color: #efefef;
}
#clients ul {
    padding: 0px 0px;
}
#clients ul li {
    margin: 0;
    list-style: none;
    display: table-cell;
}
#clients ul li img {
    opacity: 0.2;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    margin: 5px;
    flex: 1 0 200px;
    align-self: center;
}
#clients ul li:hover img {
    opacity: 1;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -webkit-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
}
.row {
    display: table-row;
}
#team {
    text-align: center;
    width: 90vw;
    height: 100%;
    text-decoration-color: #AAA;
    color: #DDD;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-self: center;
    justify-content: center;
    align-items: center;
}