Padding won't work with my nav bar

Question

I'm trying to space the links out my navbar so it's more spread out and not hidden under the logo but no matter what I try it won't work. I have the logo in middle of the navbar, the link end up going behind it and everytime I try padding or margin it doesn't work at all. It has been frustrating me way to much and I can't find out what it is at all. Please help me find the solution.

HTML: [Removed all the code found in ]

<body>
<header>
    <div class="container">
        <h1 class="logo">
            <a href "#featured" rel="slideto">Wisp</a></h1>
        <nav>
            <ul class="main-menu">
                <li class="About"></li>
                    <a href="#About" rel="slideto">Services</a>
                <li class="Services"></li>
                    <a href="#Services" rel="slideto">Work</a>
                <li class="Work"></li>
                    <a href="#Work" rel="slideto">About</a>
                <li class="Contact"></li>
                    <a href="#Contact" rel="slideto">Contact</a>
            </ul>
        </nav>
    <div id="motto">
        <span class="alignleft">Born To</span>
        <span class="Star"></span>
        <span class="alignright">D</span>
    </div>
    </div>
</header>

<div id="featured">
    <div class="container">

Css:

@import url(http://fonts.googleapis.com/css?family=Droid+Sans|Istok+Web|Roboto);

body{
background: #8AC9D0;
text-decoration: none;
color: #fff;
font: 'Droid Sans', sans-serif;
}

a{
text-decoration:none;
}

.container {
width: 921px;
margin: 0 auto;
position:relative;
}

header{
  width:100%;
  height:124px;
  background:url('headerbg.png') repeat-x top center;
  position:fixed;
  top:0; left:0;
  z-index:9999;
}

header .logo{
margin: 0;
position: absolute;
top: 0;
left: 50%;
width: 166px; height: 120px;
margin-left:-88px;
display:block;
text-indent:-9999em;
}

header .logo a {
width:166px; height:120px;
    display:block;
    background:url('logo.png') no-repeat top center;
}

nav{
padding:25px 0 0 0;
}

ul{
list-style-type:none;
margin-right:30px;
}

.main-menu{
    width:100%;
    height:43px;
    background:url('menubg.png') no-repeat top center;
    padding:10px 0 0 0;
}

.main-menu a{
float: left; 
font-size:16px;
color:#6f6353;
font-family: 'Droid Sans', sans-serif;
text-transform:uppercase;
text-decoration:none;
line-height:34px;
display: block;
text-align:center;
letter-spacing:2px;
padding:0 40px;
overflow:hidden;
}

.main-menu a:hover{
background:#e6e2dc;
}


#motto{
width:390px; height:23px;
background:#fff;
text-align:center;
border:1px solid #98b5b8;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
position:absolute;
top:107px; left:50%;
margin-left:-199px;
}

#motto span{
font-size:10px;
color:#6f6353;
font-family: 'Roboto', sans-serif;
letter-spacing:4px;
text-transform:uppercase;
padding:4px 0 0 0;
}

#motto span.alignleft{
padding-right:10px;
margin-left:-50px;
}

#motto span.alignright{
padding-left:10px;
margin-right:-63px;
}

#motto span.Star{
width:14px; height:14px;
background:url('slogan-star.jpg') no-repeat top center;
position:absolute;
left:50%; 
top:4px;
}

Try: `.main-menu li{padding:15px;}` – redleaf Mar 09 '14 at 04:54 — redleaf, Mar 09 '14 at 04:54

score 0 · Answer 1 · edited May 23 '17 at 11:57

1) In your HTML, remove the "li" and "ul" elements; they're complicating your CSS unnecessarily. Instead, give the "nav" element the "main-menu" class. 2) Add a new class to each of the "a" (anchor) elements, I'll explain why below:

<nav class="main-menu">
    <a class="main-menu-link" href="#About" rel="slideto">Services</a>
    <a class="main-menu-link" href="#Services" rel="slideto">Work</a>
    <a class="main-menu-link" href="#Work" rel="slideto">About</a>
    <a class="main-menu-link" href="#Contact" rel="slideto">Contact</a>
</nav>

In your CSS, get rid of the "float" and the "display". The reason I said to add a class to the anchor elements inside the nav bar was because you had this:

.main-menu a {
    ...
}

Which means "apply this style to the main-menu nav bar and all links". This mistakenly applied your button CSS to your nav bar CSS. Doing this (below) instead is probably what you intended, i.e., only to target links in the nav bar:

.main-menu-link {
    font-size:16px;
    color:#6f6353;
    font-family: 'Droid Sans', sans-serif;
    text-transform:uppercase;
    text-decoration:none;
    line-height:34px;
    text-align:center;
    letter-spacing:2px;
    padding:0 40px;
    overflow:hidden;
}

Now when you increase the 40px in "padding", you'll notice the buttons nav bar buttons "growing" horizontally with the text centered; when you increase the padding under "main-menu", you'll get the same effect, except with the buttons centered and the nav bar growing around them.

If you're trying to "space out" the buttons, you should use "margin", not "padding", and apply it to "main-menu-link" (above); this will space out the buttons from each other. This post might be of use:

When to use margin vs padding in CSS

Also note that the "nav" element is pretty widely supported but it doesn't work in IE versions under IE9. A regular "div" will probably suffice in this case.

I hope to have helped at least :)

I tried and I appreciate the help nothing really worked. I tried to define each link as a different class but that made the code a bit messy. My intention right now is to just be able to add a margin to each link spreading each out out differently. [Picture/Issue](http://prntscr.com/2zc34v) is how it looks right now, I'm trying to get each link into a position to fit inside the bars thing. — user3397632, Mar 09 '14 at 17:16

Padding won't work with my nav bar

1 Answers1