フレックス：水平方向に画面を超えます

Question

すべては問題ありませんが、画面が小さくなると中央に揃えたいので、中央に揃えますが、画面外のスペースも表示されます。

コード：

.example { 
 
    line-height: 30px; 
 
    background-color: #363636; 
 
    color: #ffffff; 
 
    height: 353px; 
 
    padding: 26px 0 0 0; 
 
} 
 
.example-links { 
 
    width: 960px; 
 
    margin: 0 auto; 
 
    font-size: 12px; 
 
    display: -webkit-flex; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: row; 
 
    -ms-flex-direction: row; 
 
    flex-direction: row; 
 
    justify-content: flex-start; 
 
    -webkit-box-align: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    -webkit-box-pack: center; 
 
    -ms-flex-pack: center; 
 
} 
 
.example-1 { 
 
    height: 55px; 
 
    margin-left: 3px; 
 
    padding: 0 69px 0 0; 
 
    position: relative; 
 
} 
 
.example-2 { 
 
    text-transform: uppercase; 
 
    -moz-column-count: 2; 
 
    -webkit-column-count: 2; 
 
    column-count: 2; 
 
    -moz-column-gap: 52px; 
 
    -webkit-column-gap: 52px; 
 
    column-gap: 52px; 
 
    padding: 0 20px 0 0; 
 
    margin: 0 0 0 44px; 
 
    position: relative; 
 
} 
 
.example-networks { 
 
    -moz-column-count: 2; 
 
    -webkit-column-count: 2; 
 
    column-count: 2; 
 
    margin-left: 74px; 
 
    -moz-column-gap: 52px; 
 
    -webkit-column-gap: 52px; 
 
    column-gap: 83px; 
 
} 
 
@media only screen and (max-width: 960px) { 
 
    .example-links { 
 
    -webkit-flex-direction: column-reverse; 
 
    flex-direction: column-reverse; 
 
    -webkit-align-items: center; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
    align-content: center; 
 
    flex-wrap: wrap; 
 
    margin-bottom: 30px; 
 
    } 
 
    .example-1 { 
 
    height: auto; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
    margin-bottom: 30px; 
 
    } 
 
    .example-2 { 
 
    text-transform: uppercase; 
 
    -moz-column-count: 2; 
 
    -webkit-column-count: 2; 
 
    column-count: 2; 
 
    -moz-column-gap: 52px; 
 
    -webkit-column-gap: 52px; 
 
    column-gap: 52px; 
 
    padding: 0; 
 
    margin: 0; 
 
    position: relative; 
 
    margin-bottom: 30px; 
 
    } 
 
    .example-3 { 
 
    margin-bottom: 30px; 
 
    text-transform: uppercase; 
 
    -moz-column-count: 2; 
 
    -webkit-column-count: 2; 
 
    column-count: 2; 
 
    margin-left: 0; 
 
    -moz-column-gap: 52px; 
 
    -webkit-column-gap: 52px; 
 
    column-gap: 83px; 
 
    } 
 
}

<footer class="example"> 
 
    <section class="example-links"> 
 
    <ul class="example-1"> 
 
     <li>Lorem Ipsum</li> 
 
     <li>Lorem Ipsum</li> 
 
    </ul> 
 
    <ul class="example-2"> 
 
     <li>Lorem Ipsum</li> 
 
     <li>Lorem Ipsum</li> 
 
     <li>Lorem Ipsum</li> 
 
     <li>Lorem Ipsum</li> 
 
    </ul> 
 
    <ul class="example-3"> 
 
     <li>Lorem Ipsum</li> 
 
     <li>Lorem Ipsum</li> 
 
     <li>Lorem Ipsum</li> 
 
     <li>Lorem Ipsum</li> 
 
    </ul> 
 
    </section> 
 
</footer>

https://jsfiddle.net/Eisenhansel/gmnff17y/

Answer 1

それが正常に動作しています。ただ、クラス.example-links CSSは次のようにmax-widthの代わりwidthを使用修正：

.example-links { 
    max-width: 960px; 
    width:100%; 
} 

.example { 
 
    line-height: 30px; 
 
    background-color: #363636; 
 
    color: #ffffff; 
 
    height: 353px; 
 
    padding: 26px 0 0 0; 
 
} 
 
.example-links { 
 
    max-width: 960px; 
 
    width:100%; 
 
    margin: 0 auto; 
 
    font-size: 12px; 
 
    display: -webkit-flex; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: row; 
 
    -ms-flex-direction: row; 
 
    flex-direction: row; 
 
    justify-content: flex-start; 
 
    -webkit-box-align: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    -webkit-box-pack: center; 
 
    -ms-flex-pack: center; 
 
} 
 
.example-1 { 
 
    height: 55px; 
 
    margin-left: 3px; 
 
    padding: 0 69px 0 0; 
 
    position: relative; 
 
} 
 
.example-2 { 
 
    text-transform: uppercase; 
 
    -moz-column-count: 2; 
 
    -webkit-column-count: 2; 
 
    column-count: 2; 
 
    -moz-column-gap: 52px; 
 
    -webkit-column-gap: 52px; 
 
    column-gap: 52px; 
 
    padding: 0 20px 0 0; 
 
    margin: 0 0 0 44px; 
 
    position: relative; 
 
} 
 
.example-networks { 
 
    -moz-column-count: 2; 
 
    -webkit-column-count: 2; 
 
    column-count: 2; 
 
    margin-left: 74px; 
 
    -moz-column-gap: 52px; 
 
    -webkit-column-gap: 52px; 
 
    column-gap: 83px; 
 
} 
 
@media only screen and (max-width: 960px) { 
 
    .example-links { 
 
    -webkit-flex-direction: column-reverse; 
 
    flex-direction: column-reverse; 
 
    -webkit-align-items: center; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
    align-content: center; 
 
    flex-wrap: wrap; 
 
    margin-bottom: 30px; 
 
    } 
 
    .example-1 { 
 
    height: auto; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
    margin-bottom: 30px; 
 
    } 
 
    .example-2 { 
 
    text-transform: uppercase; 
 
    -moz-column-count: 2; 
 
    -webkit-column-count: 2; 
 
    column-count: 2; 
 
    -moz-column-gap: 52px; 
 
    -webkit-column-gap: 52px; 
 
    column-gap: 52px; 
 
    padding: 0; 
 
    margin: 0; 
 
    position: relative; 
 
    margin-bottom: 30px; 
 
    } 
 
    .example-3 { 
 
    margin-bottom: 30px; 
 
    text-transform: uppercase; 
 
    -moz-column-count: 2; 
 
    -webkit-column-count: 2; 
 
    column-count: 2; 
 
    margin-left: 0; 
 
    -moz-column-gap: 52px; 
 
    -webkit-column-gap: 52px; 
 
    column-gap: 83px; 
 
    } 
 
}

<footer class="example"> 
 
    <section class="example-links"> 
 
    <ul class="example-1"> 
 
     <li>Lorem Ipsum</li> 
 
     <li>Lorem Ipsum</li> 
 
    </ul> 
 
    <ul class="example-2"> 
 
     <li>Lorem Ipsum</li> 
 
     <li>Lorem Ipsum</li> 
 
     <li>Lorem Ipsum</li> 
 
     <li>Lorem Ipsum</li> 
 
    </ul> 
 
    <ul class="example-3"> 
 
     <li>Lorem Ipsum</li> 
 
     <li>Lorem Ipsum</li> 
 
     <li>Lorem Ipsum</li> 
 
     <li>Lorem Ipsum</li> 
 
    </ul> 
 
    </section> 
 
</footer>