So a while ago I was tasked with the job of building the fantastic site that is now www.palagioproducts.com. When I first saw the designs I was very happy that it would be a nice straight forward build and I would have no real issues. I’ve already posted about one of the hurdles I encountered building the site which was the lovely responsive borders using CSS pseudo elements, yet that wasn’t the issue that most took me by surprise. The first major issue I encountered was a centrally aligned main menu, as seen here:

I’ll be honest I was stumped, at first I thought I should be able to get it working with my already quite extensive knowledge of CSS but for the life of me I wasn’t getting anywhere. I was very reluctant however to change any of my markup from the standard tidy navigation markup I’ve become accustomed to writing (below).

    *   [Item 1](#)
    *   [Item 2](#)
    *   [Item 3](#)

So on the hunt I went for a solution as clearly I couldn’t come across one myself.

And this is what I found, I know a couple of people who’ve had this issue recently as well and I’m sorry I’m only just posting this but you’re going to kick yourself when you see the next couple of lines:

nav ul {
width: 100%;
text-align: center; padding: 0; }

nav ul li { display: inline;
}

Here’s what it produces:

• Item 1
• Item 2
• Item 3

And it really is as simple as that!