У меня есть html-код, который я обернул в один блок <div class="container">
. Я хотел сделать так, чтобы всё было серым, кроме самого блока container. Вот только его цвет выводится на экран очень странно, постоянно "отставая" от содержимого. Как это исправить? Вот сам код:
body {
margin: 0;
padding-top: 10px;
background-color: #F3F3F3;
}
.container {
width: 1000px;
height: 100%;
margin: 0 auto;
background-color: #fff;
padding: 20px 10px 20px 10px;
}
header {
height: 75px;
border-bottom: 2px solid #000;
}
h2 {
margin-top: 0;
}
a {
text-decoration: none;
color: #000;
}
.child {
display: inline-block;
}
#links {
float: right;
margin-top: 3px;
}
#admin {
position: relative;
float: right;
margin-top: 25px;
margin-right: -190px;
}
main {
height: 300px;
padding-top: 3px;
}
aside {
float: left;
width: 100px;
font-size: 20px;
border-right: 2px solid black;
margin-right: 20px;
border-bottom: 2px solid black;
padding-left: 5px;
padding-top: 5px;
margin-top: -3px;
}
aside a {
display: block;
margin-bottom: 15px;
}
<div class="container">
<header>
<div class="child">
<h2>Ваше название</h2>
</div>
<div id="links" class="child"><a href="#">Администраторы</a> | <a href="#">Выход</a></div>
<div id="admin">
<p>Вы - <a href=#>Администратор</a></p>
</div>
</header>
<main>
<aside>
<a href="orders.php">Заказы</a>
<a href="#">Товары</a>
<a href="#">Отзывы</a>
<a href="#">Категории</a>
<a href="#">Клиенты</a>
<a href="#">Новости</a>
<a href="#">Сайт</a>
</aside>
</main>
</div>
P.S.: заранее спасибо за помощь! Я новичок во фронтенде,так что очень надеюсь, что мой вопрос не слишком глупый.