어떻게 모바일 페이지 탐색 표시 줄을 정렬합니까?

Question

그래서 탐색 모음이 정렬되고 배경색 위로 마우스를 가져 가면 디자인에 비례하지 않으며 클릭 한 번으로 코드를 엉망으로 만들지 않고 중심에 놓고 싶을 때 끔찍하게 보입니다. 여기

은 지금 모습입니다 :

내가 코드를 수정하기 위해 노력하고 플로트를 멀리했다 : A 없음 왼쪽하고 탐색 격 것으로 보인다.

이

 .mainBanner nav{ 
position: absolute; 
/*text-align: center;*/ 
    top: 15%; 
    left: 15%; 
font-size: 1.190em; 
font-weight: bold; 
height: 40px; 
line-height: 30px; 
margin: 0 auto 30px 50px; 
font-family: 'lato-Reg', sans-serif; 

    } 

    .mainBanner nav ul { 
    list-style: none; 
    margin: 0 auto; 
    } 

    .mainBanner nav ul li { 
float: left; 
display: inline; 
    } 
    .mainBanner nav a:link, .mainBanner nav a:visited { 
color: #ecf0f1; /* Color of the font in the nav*/ 
display: inline-block; 
height: 30px; 
padding: 5px 30px; 
text-decoration: none; 
    } 
    .mainBanner nav a:hover, .mainBanner nav a:active, 
    .mainBanner nav .active a:link, .mainBanner nav .active a:visited { 
background: #16a085; 
color: #fff; 
border-radius: 2px; 
-moz-border-radius: 2px; 
-webkit-border-radius: 2px; 
text-shadow: none !important; 
    } 

Answer 1

갱신이와 코드가

//comment this line 
.mainBanner nav ul li { 
    /*float: left; */ 
    display: inline; 
} 

//uncomment this line 
.mainBanner nav{ 
    text-align: center; 
} 

Fiddle