Styling navbars

Vote count:

0

I want to create a space between Introduce Yourself and the main nav bar like the one between Share Stories and Introduce yourself. The code that styles the Introduce Yourself nav bar and the Share Stories nav bar are the same so I am a bit confused as to why it is being displayed like this.

Here is the css code:

div.IntroduceYourself nav,
div.IntroduceYourself nav ul,
div.IntroduceYourself nav li div.IntroduceYourself nav a {
    list-style: none;
    margin: 8px 8px 8px 8px;
    padding: 2px 2px 2px 2px;
    border: 2px 2px 2px 2px;
    font-size: 12px;
    font-family: Helvetica;
    line-height: 1;
}

div.IntroduceYourself nav ul {

    zoom: 1;
    background: #a7bc7a url(images/pattern.png) top left repeat;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #839b4e;
    -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    width: 578px;
    margin: 0 auto;
    padding: 0;
}

div.IntroduceYourself nav ul:before {
    content: '';
    display: block;
}

div.IntroduceYourself nav ul:after {
    content: '';
    display: table;
    clear: both;
}

div.IntroduceYourself nav a,
div.IntroduceYourself nav a:link,
div.IntroduceYourself nav a:visited {
    padding: 5px 12px;
    display: block;
    text-decoration: none;
    color: #ffffff;
    text-shadow: 0 -1px 1px #586835;
    border-right: 1px solid #839b4e;
}

div.IntroduceYourself nav a:hover {
    color: #586835;
    text-shadow: 0 1px 1px #bdcd9c;
}

div.IntroduceYourself nav li {
    float: left;
    border-right: 1px solid #b2c58b;
}

div.IntroduceYourself nav ul li.category{
    float: left;
    vertical-align: top;
}

div.IntroduceYourself nav ul li {
    float: right;
    vertical-align: top;
}




div.Stories nav,
div.Stories nav ul,
div.Stories nav li div.Stories nav a {
    list-style: none;
    margin: 4px 4px 4px 4px;
    padding: 2px 2px 2px 2px;
    border: 2px 2px 2px 2px;
    font-size: 12px;
    font-family: Helvetica;
    line-height: 1;

}

div.Stories nav ul {
    zoom: 1;
    background: #a7bc7a url(images/pattern.png) top left repeat;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #839b4e;
    -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    width: 578px;
    margin: 0 auto;
    padding: 0;
}

div.Stories nav ul:before {
    content: '';
    display: block;
}

div.Stories nav ul:after {
    content: '';
    display: table;
    clear: both;
}

div.Stories nav a,
div.Stories nav a:link,
div.Stories nav a:visited {
    padding: 5px 12px;
    display: block;
    text-decoration: none;
    color: #ffffff;
    text-shadow: 0 -1px 1px #586835;
    border-right: 1px solid #839b4e;
}

div.Stories nav a:hover {
    color: #586835;
    text-shadow: 0 1px 1px #bdcd9c;
}

div.Stories nav li {
    float: left;
    border-right: 1px solid #b2c58b;
}

div.Stories nav ul li.category{
    float: left;
    vertical-align: top;
}

div.Stories nav ul li {
    float: right;
    vertical-align: top;
}

Thanks

asked 1 min ago

tryingtolearn

43

Styling navbars