Возникла проблемка, мне не нравится слишком большое отступ внутри блока с левой стороны.
То есть отступ в блоке с меню, слева большой отступ и сверху, как его нормальным сделать?
И, если можно, скажите пожалуйста как можно сделать это меню лучше?
Огромное спасибо, кстати ниже напишу код )))
index.html
<!DOCTYPE html>
<html>
<head>
<title>Главная страница</title>
<META content="text/html; charset=Windows-1251" http-equiv="Content-Type">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="head">Шапка сайта!</div>
<div class="menu">
<nav>
<ul>
<li><a href="#">Main page</a></li>
<li><a href="#">Main page</a></li>
<li><a href="#">Main page</a></li>
<li><a href="#">Main page</a></li>
<li><a href="#">Main page</a></li>
</ul>
</nav>
</div>
</body>
</html>
style.css
body {
background-color: #DCDCDC;
}
.head {
background-color: #ffffff;
color: #000000;
width: 1000px;
height: 200px;
margin: 0 auto;
padding: 2px;
border-bottom: solid 1px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}
.menu {
background: #30a8c3;
color: #000000;
width: 1000px;
height: 40px;
margin: 0 auto;
margin-top: 0px;
padding: 2px;
padding-left: 0px;
border-bottom: solid 1px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}
.menu nav ul li{
list-style: none;
float: left;
margin-right: 3px;
}
.menu nav ul li a{
text-decoration: none;
display: inline-block;
padding: 5px 15px;
color: #FFFFFF;
}
Вот изображение