Hej jag fattar inte hur jag skall flytta ner mitt menu-div element. När jag kör margin-top eller padding-top så ligger det kvar längst upp och det blir som att bara heigten ändras till större. Hur skall jag bygga upp min kod för att detta skall funka?
Min html:
<html>
<head></head>
<link rel="stylesheet" href="style.css" />
<body>
<div class="top">
<div class="menu-div">
<div class="menu">
<ul>
<li>Home</li><li>Contact</li><li>Products</li><li>About us</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Min css:
* {
margin: 0px;
padding: 0px;
background: #421F1F;
}
.top {
background-image: url(images/logo2.png);
height: 400px;
width: 100%;
}
.menu-div {
background-color: #421F1F;
height: 40px;
max-height: 40px;
width: 60%;
max-width: 700px;
margin-right: auto;
margin-left: auto;
border-radius: 5px;
float: inherit;
padding-top: 20px;
}
.menu {
text-align: center;
color: white;
}
.menu ul {
text-align: center;
list-style-type: none;
color: white;
padding-top: 10px;
}
.menu li {
display: inline;
}
Tacksam för lite hjälp är helt ny på html och css