Стыдно спрашивать про "бородатый баян", но "все глаза уже проглядел".
Не вижу в чем ошибка, но
при уменьшении окна браузера, последний инлайн-блок выпадает из "родителя". Добавлял clearfix родителю, но все равно выпадает. В чем моя ошибка?
Кстати не понимаю почему при сумме ширин "детей" равной 100% и box-sizing: border-box, они не помещаются в "родителя".
См.
codepen.io<head>
<link rel="stylesheet" type="text/css" href="/css/css.css">
</head>
<div class="header">
<div class="wrap">
<a href="" class="header--logo"></a>
<ul class="header--menu">
<li class="menu__item"><a href="/news/" class="menu__item--link">Новости</a></li>
<li class="menu__item"><a href="/news/" class="menu__item--link">Новости</a></li>
<li class="menu__item"><a href="/news/" class="menu__item--link">Новости</a></li>
</ul>
<div class="header--connection">
<div class="header--link">
<a href="tel:+22222222" class="header--link__contact">
+7 (222) 222-22-22
</a>
<a href="mailto:qwe@qwe.ru" class="header--link__contact--email">
qwe@qwe.ru
</a>
</div>
<div class="header--link">
<a href="/order/" class="btn">Заказать услугу</a>
<a href="/vopros/" class="btn">Поиск по сайту</a>
</div>
</div>
</div>
</div>
body {
font-size: 100%;
width: 100%;
font-family: "Roboto", Arial, Helvetica, sans-serif;
}
.clearfix:after {
content:'';
display:table;
clear:both;
}
.header {
background-image: url("/images/head.jpg");
background-repeat: repeat-x;
background-position: 60% 20%;
height: 8em;
border: 1px solid #ccc;
}
.wrap {
width: 75%;
margin: 0 auto;
}
.header--logo,
.header--menu,
.header--connection {
display: inline-block;
box-sizing: border-box;
vertical-align: top;
height: 100%;
border: 1px solid #ccc;
}
.header--logo {
width: 15%;
background-image: url("/images/logo.png");
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
}
.header--menu {
width: 40%;
text-align: center;
color: #287dcc;
}
.header--menu .menu__item {
display: inline;
margin: 0 auto;
}
.header--connection {
width: 44%;
}
.header--link {
height: 48%;
display: inline-block;
box-sizing: border-box;
}
Простой
Простой
