爲什麼我的網站在移動視圖中有水平滾動條？

Question

所以我正在做一個登陸頁面，但是如果我在手機上測試它，並且我不知道爲什麼，那麼在移動設備上有一個水平滾動條。 我覺得有什麼東西是突破它。

my codepen link

Answer 1

滾動條在codepen我取出時，我使用此代碼：

@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css); 
body { 
    transition: all 300ms; 
    background-color: #1D1F16; 
    font-family: 'Product Sans', Arial, sans-serif; 
    min-height: 100%; 
} 

section { 
    width: 100%; 
    min-height: 100%; 
} 

.logo { 
    background: red; 
    width: 200px; 
    height: 100px; 
    position: relative; 
    margin: 0 auto; 
    border-radius: 0; 
    margin-top: 20px; 
} 

.box { 
    width: 100%; 
    min-height: 100%; 
    transform: translate(0px, 90px); 
    /* botder-bottom: 3px solid #D70778; 
    botder-top: 3px solid #D70778; */ 
} 

@media (max-width: 600px) { 
    .box { 
    width: auto; 
    min-height: 100%; 
    margin: 0 auto; 
    border-radius: 0; 
    padding: 1em; 
    } 
} 

@media (max-width: 1200px) { 
    .box { 
    transform: translate(0px, 90px); 
    } 
} 

.hammerBox { 
    width: 60px; 
    margin: 0 auto; 
} 

.hammer { 
    width: 60px; 
    margin: 0 auto; 
    position: relative; 
    animation: anim1 2s; 
    animation-iteration-count: infinite; 
    size: 30px !important; 
    text-align: center; 
} 

@keyframes anim1 { 
    0% { 
    bottom: 0px; 
    } 
    25% { 
    bottom: 35px; 
    } 
    50% { 
    bottom: 15px; 
    } 
    75% { 
    bottom: 35px; 
    } 
    100% { 
    bottom: 0px; 
    } 
} 

.text1 { 
    text-align: center; 
    color: #D70778; 
    margin-bottom: 0px!important; 
    text-shadow: -1px 1px 5px #1D1F16; 
} 
.uc-2 { 
    text-align: center; 
    margin-top: 5px; 
    color: #F5F5F5; 
} 

a { 
    text-decoration: none; 
    color: #fff; 
} 

p > a:hover { 
    color: #d9d9d9; 
    text-decoration: underline; 
} 

._14 { 
    font-size: 1.4em; 
    color: white; 
    text-align: center; 
    margin-bottom: 15px; 
} 

ul { 
    padding: 0; 
    list-style: none; 
    margin-top: 10px; 
    text-decoration: none; 
    width: 50%; 
    margin: 0 auto; 
} 

.footer-social-icons { 
    width: 350px; 
    display: block; 
    margin: 0 auto; 
} 
.social-icons li { 
    height: 100px; 
    display: inline-block; 
    float: left; 
    height: auto; 
    width: calc(100%/3); 
    text-align: center; 
} 

.social-icons li a { 
    display: block; 
    height:100%; 
    width:100%; 
    display:block; 
} 

.fa { 
    padding: 10px 14px; 
    -o-transition: .5s; 
    -ms-transition: .5s; 
    -moz-transition: .5s; 
    -webkit-transition: .5s; 
    transition: .5s; 
} 

.fa-facebook:hover { 
    color: #3d5b99; 
} 

.fa-snapchat:hover { 
    color: #fffc00; 
} 

.fa-instagram:hover { 
    color: #e95950; 
}