无法在另一个div中水平居中div

Question

我试图让id与＃34; team＆＃34;在其父div内水平居中，但它看起来像下图。我认为边缘左边和边距右边是50％就可以了，但事实并非如此。我做错了什么？

HTML：

#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;
}

相关CSS：

statusUpdate

Answer 1

这是你想要的吗？ 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;
}