Неравномернный padding / css?

Question

[adam_maks]

Всем привет.

Я только начинаю учится верстать и столкнулся с проблемой в css - padding. Не могу понять как он работает, а Google не помог. Суть проблемы в процентах. Есть два блока в блоке "section", делаю внутренний отступ, но правый блок как будто "Уезжает" или "Съедается" .

В итоге вопрос: Как работает padding и правильно ли я думаю, что если всё в процентах, то внутренние отступы должны быть одинаковыми? А то слева есть отступ, а с права нет..... (Help!) .

Вот код и скрины:

<div class='section'>
                     <div class='list list1'>
                     </div>
                     <div class='list list2'>
                     </div>
                </div>

.section{
    width: 100%;
    background: url('/img/fon_about.png');
    background-position: 25px 1px;
    box-shadow: 0px 0px 20px #999;
    margin: 20px auto;
    padding: 0px;
}
.list{
    width: 50%;
    height: 420px;
    margin-left: -1.782px;
    padding: 0px;
    overflow: hidden;
    display: inline-block;
}

.list1{background: url('/img/look/1.jpg') no-repeat; background-size: 100%;}.list2{background: url('/img/look/2.jpg') no-repeat; background-size: 100%;}

Screen

До

После

Answer 1

[Максим Морев]

Вам нужно уложить в голове, как рассчитывается ширина блока. Вот тут про блочную модель, например.

В вашем случае - можно либо убрать width у section (блочные элементы по умолчанию на всю ширину тянутся, ширина задана как auto), либо задать ему box-sizing: border-box, чтобы значение padding включалось в ширину блока.

Comments

[adam_maks]

Спасибо ,уже помогло - так же прочту страницу которой вы поделились.

[Максим Морев]

adam_maks, пожалуйста. Можете отметить решением :)