Hi there,

 

I have developed a website for a client which you can visit at http://curiousbookco.com/. The developer I am using has proven unreliable and I just want want this client's website signed off as it is dragging on.

 

Basically, in the primary navigation, the client wants to make sure that the the menu items on the left and right of the logo maintain equal spacing from the logo as the window's width is reduced. As the menu items on the left are collectively narrower than those on the right due to the amount of characters this is proving difficult, apparently.

 

If anyone can suggested a solution which will work across browsers (IE9+) and devices that would be most appreciated!

 

Best,

Audity

 

--

 

The HTML:

<ul>
	<li><a href="/">home</a></li>
	<li><a href="/about-us/">about us</a></li>
	<li><a href="/services/">services</a></li>
</ul>
<ul>
	<li><a href="/"><img src="/images/logo.png" alt="Logo"></a></li>
</ul>
<ul>
	<li><a href="/design-suite/">design suite</a></li>
	<li><a href="/clients/">clients</a></li>
	<li><a href="/contact-us/">contact</a></li>
</ul>

 

And the CSS:

header ul {
  text-align: center;
  overflow: hidden;
  margin: 0 auto 0 auto;
}
header ul:first-child {
  float: left; margin-top: -3px;
}
header ul:last-child {
  float: right; margin-top: -3px;
}
header ul:nth-child(2) {
  position: absolute;
  left: 0px;
  right: 0;
  width: 148px;
  top: 20px;
  height: 79px;
  text-align: center;
  width:auto !important;
  z-index: -100;
}
header ul:nth-child(2) li {
  margin-top: 0;
  float: none;
}
header ul li {
  margin-top: 85px;
  display: inline-block;
  margin-left: 50px;
  
}
@media screen and (max-width: 1100px) {
  header ul li {
    margin-left: 20px;
  }
}
header ul li:first-child {
  margin-left: 0;
}
header ul li a {
  font-family: 'ralewaysemibold';
  text-transform: uppercase;
  text-decoration: none;
  font-size:14px;
  color: #2D323B;
}
header ul li a img {
  max-height: 90px;
}

 

Make the space between the left li's wider to make the 'services' and design suite' match up with their spaces towards the logo?

You want to let text-align: center do the work for you. http://jsfiddle.net/wWVm6/