Разметка адаптивного сайта

@sweelemk · Регистрация: 16.09.2013

Author24 — интернет-сервис помощи студентам

Здравствуйте! Бьюсь головой, но не могу найти ошибку.
Верстаю адаптивный сайт. Ширина блока 100%. внутренний блок криво отображается, а почему - не знаю.

HTML5

<section class="aboutUs">   
    <div class="infoInner">
        <span class="bg_span"></span>
        <h2 class="upper">A new generation of vintage bike</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
    </div>
</section>

CSS

.aboutUs{
    width: 100%;
    height: 100%;
    position: relative;
    background: #f7f7f7;
    padding: 115px 16% 140px;
 
}
.infoInner{
    position: relative;
    width: 68%;
    height: 100%;
    background: #aeaeae;
    text-align: center; 
}
.bg_span{
    background: url('../image/part_1.png') no-repeat;
    position: relative;
    display: table;
    width: 52px;
    height: 42px;
    left: 50%;
    margin-left: -26px;
}

@vovandr · 18.07.2014, 23:01

а что именно криво?

@sweelemk · 18.07.2014, 23:10 **[ТС]**

vovandr, появляется нижний скролл http://take.ms/u3CrP

@vovandr · 18.07.2014, 23:15

Потому что у вас padding задан в процентах левый и правый...и ширина 100%. Cтандартная блочная модель их складывает 100% + 32% и в сумме получается больше ширины просмотра. Лечение:

CSS

1
2
3

*{
  box-sizing: border-box;
}

@sweelemk · 18.07.2014, 23:28 **[ТС]**

vovandr, vovandr, Спасибо! Все отлично помогло! Взял на заметку!

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	18.07.2014, 23:01	2
	а что именно криво? 0

@sweelemk 0 / 0 / 1 Регистрация: 16.09.2013 Сообщений: 127
	18.07.2014, 23:10 [ТС]	3
	vovandr, появляется нижний скролл http://take.ms/u3CrP 0

@sweelemk 0 / 0 / 1 Регистрация: 16.09.2013 Сообщений: 127
	18.07.2014, 23:28 [ТС]	5
	vovandr, vovandr, Спасибо! Все отлично помогло! Взял на заметку! 0