Детский элемент, выходящий за пределы родительского div при переходе на мобильный вид

Question

Я абсолютно зациклен на том, что здесь происходит. Я пробовал все исправления, которые мог найти на этом сайте, и ничего не помогло.

Я пытаюсь улучшить свой сайт при использовании мобильных устройств. С моим родительским div он изменяется от ширины px до% width, когда размер экрана меньше заданной ширины, а также дочерние элементы, изменяющиеся от float px элементов ширины до 100% элементов блока при переходе на мобильный вид.

Однако, независимо от того, что я пытаюсь, когда дочерние элементы переключаются на 100%, они принимают на себя 100% браузера, а не родителя ... Что заставляет их различать правую часть родительского элемента.

Я абсолютно уверен, что делать.

.wrapper { 
 
\t width: 1100px; 
 
\t margin: 0 auto; 
 
} 
 
.main-table { 
 
\t width: 100%; 
 
\t background-color: #FFF; 
 
\t border: 1px solid #d1d1d1; 
 
\t margin-top: 3em; 
 
\t color: #4a4949; 
 
\t font-family: Arial, sans-serif; 
 
\t font-size: 0.7em; 
 
} 
 
.main-table h2 { 
 
\t background-color: #080709; 
 
\t font-family: 'Josefin Sans', sans-serif; 
 
\t font-size: 1em; 
 
\t color: #FFF; 
 
\t font-weight: bold; 
 
\t text-transform: uppercase; 
 
\t letter-spacing: 0.3em; 
 
\t line-height: 4em; 
 
\t margin: 2.5em; 
 
\t text-align: center; 
 
} 
 
.main-table .table-content { 
 
\t float: left; 
 
\t margin: 0 2.5em 2.5em; 
 
\t text-align: justify; 
 
\t line-height: 1.3em; 
 
} 
 
.clearfix:before, .clearfix:after { 
 
    content: " "; /* 1 */ 
 
    display: table; /* 2 */ 
 
} 
 
.clearfix:after { 
 
    clear: both; 
 
} 
 
.clearfix { 
 
    *zoom: 1; 
 
} 
 
@media only screen and (max-width: 1100px) { 
 
\t .wrapper { 
 
\t \t width: 100%; 
 
\t } 
 
\t .main-table .table-content { 
 
\t \t float: none !important; 
 
\t \t width: 100% !important; 
 
\t \t margin: 0 2.5em 2.5em !important; 
 
\t } 
 
}

<div class="wrapper"> 
 
    <div class="main-table clearfix"> 
 
\t <h2>Main Title</h2> 
 
\t <div class="table-content" style="width: 636px"> 
 
     Nunc vitae purus vel dolor lacinia gravida. Vestibulum euismod dictum nulla. Suspendisse suscipit quis est ac tristique. Aenean sodales porta diam ac venenatis. Suspendisse tincidunt at ex ac vestibulum. Donec lacus turpis, condimentum suscipit tempor ut, pulvinar non velit. Vestibulum varius lacus tortor, non aliquam dolor lobortis a. Fusce bibendum, tortor ac faucibus finibus, leo leo consequat sapien, non consectetur sem nisl quis est. Duis non nunc luctus, auctor dui sed, commodo lacus. Curabitur efficitur convallis facilisis. Pellentesque tincidunt magna vel nisl volutpat consectetur. Aenean condimentum, libero in lacinia venenatis, mi purus varius turpis, quis placerat nisl nibh ac odio. Nulla ac augue elit. Integer mi ante, ultrices id finibus ut, volutpat vitae tellus. 
 
\t </div><div class="table-content" style="width: 380px; margin-left: 0"> 
 
\t \t Donec blandit, massa vel venenatis dapibus, metus nulla lacinia ligula, a accumsan metus lectus eu dolor. Ut rutrum in purus ac hendrerit. Aenean luctus urna sit amet erat pharetra, dictum tristique dolor rutrum. Fusce in porta sem. Proin augue quam, faucibus varius nisi in, aliquam scelerisque nibh. Donec blandit tortor et varius efficitur. Nam nec ipsum eget orci congue posuere at quis lectus. Sed vehicula leo eros, ut consequat enim pretium id. Aenean scelerisque at diam a fermentum. Phasellus facilisis sagittis rutrum. Donec malesuada mauris in tellus congue euismod. 
 
    </div> 
 
</div>

https://jsfiddle.net/eame16p2/

Answer 1

Заменить маржу с прокладкой, поля вызывает проблемы, поэтому ширина была более чем на 100%, потому что вы установили ширину ребенка до 100% и добавили поля ... и добавить бокс-проклейки: пограничный ящик:

.main-table .table-content { 
    float: none !important; 
    width: 100% !important; 
    padding: 0 2.5em 2.5em !important; 
margin:0; 
box-sizing:border-box; 

} 

Демо: https://jsfiddle.net/eame16p2/1/