Jimmy Mac Jimmy Mac - 3 months ago 6
CSS Question

Why isn't my <li>'s moving to the the using margin-top

Hi I am having a problem when using margin-top on li elements. I am trying to have my li be at the top of my page but my li element isn't moving to the top here is my code:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="main_header">
<h1>Title</h1>
<ul>
<li><a href="/about">About Me</a></li>
<li><a href="/Order">Order</a></li>
<li><a href="/Designs">Designs</a></li>
<li><a href="/Contact">Contact</a></li>
</ul>
</div>
</body>




Then here is my css

.main_header li a {
margin-top: -20px;
display: inline-block;
}


I hope someone can help me thank you.

Answer

If your looking for a inline navigation style ul change the css to:

.main_header li {
margin-top: -20px;
display: inline-block;
}

If your looking to move the whole list up try:

ul {
margin-top:-10px;
}

If your looking to move just the li elements closer to each other try:

.main_header li {
display: block;
}

Note - if your looking to have a inline navigation, use the <nav> html element instead to reduce styling, as it automatically places the links inline

Comments