Как обрабатывать теги Div при использовании медиа-запросов в css?

Question

У меня есть 1 тег div, и я использую медиа-запрос для их условной визуализации в соответствии с размером прокрутки. У меня следующий css код, определенный изначально.

.apple{
    width:100px;
    border: 1px solid black;
    padding: 100px;
    margin-top: 20px;
    float: left;
    margin-left: 80px;

}

After using media query it should be @media only screen and (max-width: 600px){
    .apple{
    width: 100%;     
    border: 1px solid black;
    padding:50px;
    margin-top: 10%;
    float: left;
    margin-left: 0px;
    z-index: 1;
    }
}

Моя проблема заключается в том, что, несмотря на указание ширины в 100%, я вынужден прокручивать по горизонтали, что я хочу устранить. ширина указана как 100%. Пожалуйста, помогите.

Answer 1

Удалить padding:50px. Если вы не хотите удалять отступы в div, добавьте box-sizing: border-box; к классу .apple в медиазапросе.

Answer 2

Убедитесь, что вы устанавливаете размер поля элемента (или даже всего DOM) в box-sizing: border-box;, в противном случае padding будет суммироваться с шириной элемента, и у вас получится элемент размером 100% + 100px следовательно, вызывая горизонтальное переполнение.