одинаковые адаптивные div

[Кнопа]

Добрый вечер!Помогите пожалуйста сделать два одинаковых блока, на всю ширину страницы, с паддингами 15 и 20px , внутри дива картинка и название блока. ну, вот так как то http://prntscr.com/917ijf

ставлю паддинг, появляется горизонтальный скролл. Картинка и текст не выравниваются.  ничего не получается...

Спасибо!

[Great Rash]

Чтобы паддинги не влияли на ширину блока нужно указать правило box-sizing: border-box;.

[Кнопа]

Чтобы паддинги не влияли на ширину блока нужно указать правило box-sizing: border-box;.

А как лучше задать картинку и название?Через img и span и все инлайн-блок, или дивом и в before картинку?

[Great Rash]

Это зависит от задачи. Если картинка - это иконка, то можно и before, а если это фото, то img.

[Кнопа]

Это зависит от задачи. Если картинка - это иконка, то можно и before, а если это фото, то img.

Не получается. 

<a href="/" class="service-list">    <img src="img/microscope.png">    <p>Услуги проектирования</p></a>

 .service a img{   float:left;  }.service a p {vertical-align: bottom;}

Результат все равно такой  - http://prntscr.com/91grto

А мне нужно,чтобы на одной линии было

[Great Rash]

В данном случае:

 

.service-list img,.service-list p {  display: inline-block;  vertical-align: middle;}

[Кнопа]

В данном случае:

 

.service-list img,.service-list p {  display: inline-block;  vertical-align: middle;}

ничего не изменилось.

https://jsfiddle.net/hgk9d8je/1/

[Great Rash]

https://jsfiddle.net/hgk9d8je/2/

[Кнопа]

https://jsfiddle.net/hgk9d8je/2/

Вы,наверное, не обновились, потому что ничего не изменилось)

 

https://jsfiddle.net/hgk9d8je/2/

Вы,наверное, не обновились, потому что ничего не изменилось)

 

хотя нет, вижу,все хорошо))спасибо!

[Great Rash]

Я ширину изменил, у вас текст по ширине не влазит в блок, поэтому переносится под картинку.

[Кнопа]

Я ширину изменил, у вас текст по ширине не влазит в блок, поэтому переносится под картинку.

Все равно работает криво, при изменении ширины экрана

[Great Rash]

Всё правильно работает. Тексту некуда деваться, вот он и переносится.

[atlanta]

https://jsfiddle.net/atlanta/74hvmpba/1/    вот так ??

Всё правильно работает. Тексту некуда деваться, вот он и переносится.

 

да не корректно всё работает - тексту надо придать нужный стиль - https://jsfiddle.net/atlanta/74hvmpba/1/ - вот так например