Center nav in content div

[Snean]

Hey,

i want to center a nav tag in a div tag, i tried margin, padding and width but nothing worked.

<div class="container">
        
    <!-- nav -->
    <nav id="main-nav">
        <ul>
            <li class="current">
                <a href="index.html">Start</a>
            </li>
            <li>
                <a href="#">Page1</a> 
            </li>
            <li>
                <a href="#">Page2</a>
            </li>
            <li>
                <a href="#">Events</a>
            </li>
            <li>
                <a href="#">Page4</a>
            </li>
                
            </li>
            
        </ul>
    </nav>
    <!-- /nav -->
    </div>
</header>

CSS

#main-nav { 
    float: right;
    border-right: 1px solid #d6d6d6;
    border-left: 1px solid #b0b0b0;
    z-index: 100;
}

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

[Paulie_D]

http://codepen.io/Paulie-D/pen/ByyydB

[Snean]

hey,

i pase now genug code to Codepen.
The link LINK

Now you can see left Upcoming Event and on the right side the orange boxes. Like:
ignore the dots.
Up…………..[]
Ev……………[]

The nav is right and over the [].
P3|
..[]

I want to move the middle (Center) of the content.
Like:

………|P1|P2|P3|
Up…………………….[]
Ev……………………..[]

thanks!

[Paulie_D]

Please don’t paste an entire webpage and CSS into Codepen…it’s far too much code for us to wade through to find one little thing.

Remove everything that ISN’T related to your specific issue and try again…thanks!

[Snean]

OK, i removed much code that is not necessary.

[Snean]

thanks, with your code, it is in the center.
I insert it in my site and get this
After
Earlier
http://i62.tinypic.com/29na1pg.png

On the pic you can see the gap between the brighter part and the border.
Can i remove it?

It should look like my old version OLD

[Author]

Posts