Jimmy Mac Jimmy Mac - 1 year ago 56
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>
<link rel="stylesheet" type="text/css" href="style.css">
<div class="main_header">
<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>

Then here is my css

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

I hope someone can help me thank you.

Answer Source

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 {

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download