Отзывчивый CSS Check

Question

Попытка получить контент, который будет отображаться в этом css, чтобы хорошо реагировать на веб-сайте, но содержимое делает панель прокрутки слева направо, которой трудно управлять на мобильных устройствах. Единственная часть, которая хорошо отвечает, - это настраиваемый nav для мобильных устройств, #wrapper, content и нижний колонтитул - все не слишком хорошо реагируют.

/********************************** 
GENERAL 
***********************************/ 
* { 
    margin: 0; 
} 

html{ 
    height: 100%; 
} 
body { 
    min-height: 100%; 
} 


img{ 
    max-width: 100%; 
    /*width: 250px; 
    margin-right: 15px; 
    float: left; 
    margin-bottom: 20px; 
    padding:1px; 
    border:1px solid #021a40;*/ 
    } 

#wrapper{ 
    max-width: 100%; 
    max-height: 100%; 
    border-style: dashed; 
    margin: 0 auto; 
    padding: 0 5%; 
    height: 1000px; 
    width: 960px; 
    flex: 1; 
background: rgba(255,255,255,1); 
} 

li{ 
    text-decoration: none; 
    list-style-type: none; 
} 

h1{ 
    text-align: center; 
} 
/********************************** 
HEADING 
***********************************/ 



/********************************** 
NAVIGATION 
***********************************/ 
ul.topnav { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 

ul.topnav li {float: left;} 

ul.topnav li a { 
    display: inline-block; 
    color: #f2f2f2; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    transition: 0.3s; 
    font-size: 17px; 
} 

ul.topnav li a:hover {background-color: #555;} 

ul.topnav li.icon {display: none;} 

@media screen and (max-width:680px) { 
    ul.topnav li:not(:first-child) {display: none;} 
    ul.topnav li.icon { 
    float: right; 
    display: inline-block; 
    } 
} 

@media screen and (max-width:680px) { 
    ul.topnav.responsive {position: relative;} 
    ul.topnav.responsive li.icon { 
    position: absolute; 
    right: 0; 
    top: 0; 
    } 
    ul.topnav.responsive li { 
    float: none; 
    display: inline; 
    } 
    ul.topnav.responsive li a { 
    display: block; 
    text-align: left; 
    } 
} 


/********************************** 
FOOTER 
***********************************/ 

.footer{ 
    font-size: 0.75em; 
    text-align: center; 
    clear: both; 
    padding-top: 50px; 
    color: #ccc; 
} 



/********************************** 
PAGE: HOME 
***********************************/ 

#ownerimg{ 
    width: 250px; 
    margin-right: 15px; 
    float: left; 
    margin-bottom: 20px; 
    padding:1px; 
    border:1px solid #021a40; 
} 


/********************************** 
PAGE: ADOPTION 
***********************************/ 
.adoptionimages{ 
    display: block; 
    width: 300px; 
    margin-right: 15px; 
    float: left; 
    margin-bottom: 20px; 
    padding:1px; 
    border:1px solid #021a40; 

} 

.adoptionimages2{ 
    max-width: 100%; 
    display: block; 
    width: 300px; 
    margin-left: 15px; 
    float: right; 
    margin-bottom: 20px; 
    padding:1px; 
    border:1px solid #021a40; 
} 

/********************************** 
PAGE: CONTACT 
***********************************/ 
label { 
    clear: left; 
    color: black; 
    font-size: 16px; 
    margin: 22px 32px 6px 0; 
    text-align: right; 
    text-shadow: 0 1px 0 #F2F2F2; 
    text-transform: capitalize; 
    width: 94px; 
} 

form li { 
    list-style-type:none;} 

form { 
    background: none repeat scroll 0 0 silver; 
    border: 2px solid black; 
    border-radius: 40px 40px 40px 40px; 
    list-style: none outside none; 
    margin: 60px auto; 
    padding: 60px 30px; 
    width: 430px; 
} 



input { 
    background: -moz-linear-gradient(center top , gold 0%, white 20%) repeat scroll 0 0 transparent; 
    border-radius: 51px 5px 90px 5px; 
    color: black; 
    font-family: sans-serif; 
    font-size: 16px; 
    height: 30px; 
    margin: 4px 0 21px; 
    padding: 3px; 
    text-shadow: 0 -1px 0 #334F71; 
    text-transform: capitalize; 
    width: 256px;} 

textarea { 
    background: -moz-linear-gradient(center top , gold 0%, white 20%) repeat scroll 0 0 transparent; 
    border-radius: 51px 5px 90px 5px; 
    color: black; 
    font-family: sans-serif; 
    font-size: 16px; 
    height: 170px; 
    margin: 0 0 21px; 
    padding: 12px 20px 0; 
    text-shadow: 0 -1px 0 #334F71; 
    text-transform: capitalize; 
    width: 256px; 

textarea::-webkit-input-placeholder { 
     color: #a1b2c3; text-shadow: 0px -1px 0px #38506b; 
     border-radius:30px; 
} 


textarea:-moz-placeholder { 
     color: #a1b2c3; text-shadow: 0px -1px 0px #38506b; 
} 


input[type=submit] { 
    width: 185px; height: 52px; float: right; padding: 10px 15px; margin: 0 15px 0 0; 
    -moz-box-shadow: 0px 0px 5px #999;-webkit-box-shadow: 0px 0px 5px #999; 
    border: 1px solid #556f8c; 
    background: -moz-linear-gradient(top, #718DA9 0%, #415D79 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#718DA9), color-stop(100%,#415D79)); 
} 



/********************************** 
COLORS 
***********************************/ 

Answer 1

Причина того, в вашей странице в scrollbar является bcoz текстового перекрытия вашей обертки. Также не объявляйте фиксированную ширину, если хотите сделать вашу страницу отзывчивой. Проверьте эту скрипку. https://jsfiddle.net/xnbnz3zd/2/

#wrapper p{ 
    word-break:break-word; 
} 

#wrapper{ 
    max-width: 100%; 
    max-height: 100%; 
    border-style: dashed; 
    margin: 0 auto; 
    padding: 0 5%; 
    height: 1000px; 
    flex: 1; 
background: rgba(255,255,255,1); 
}