talbot649 on "Spun Theme Centre Navigation Menu"

Hi there,

I've managed to centre the navigation menu for use on desktop browsers, however it was a fair bit of trial and error and it looks awful on tablets and smartphones. I was hoping someone could take a look at the following CSS and advise where I'm going wrong?

The site is http://andrewbrannanphotography.co.uk/ - if you reduce your browser window you'll see the layout get thrown...

/* =Menu
----------------------------------------------- */

.main-navigation {
	color: #999;
	float: left;
	display: block;
	font-family: Helvetica, Arial, sans-serif;
	-webkit-text-stroke: .15px; /* Hack to fix thin text in Windows */
	font-size: 12px;
	font-size: 1.2rem;
	font-weight: 5;
	margin: 130px 0 0;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	width: 75%;
}
.main-navigation ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}
.main-navigation li {
	float: right;
	text-align: center;
	margin: 0 0 5px 20px;
	position: relative;
}