가로정렬 메뉴바를 만들었는데 저렇게 빈칸이 생기네요 빈칸없이 붙이고싶은데..

어떻게 해야되나요? 원래 float:left; 였는데 메뉴바를 중앙에 배치하려고 ul 과li에 display:inline-block;로 바꿨더니 저래요. 메뉴바를 중앙에 배치하면서 저 빈칸없애려면 어떻게 해야되나요?

메뉴바css는 이렇습니다..

            /*--게시판코드--*/
            #topMenu{
                height:  0px;
                width: 1080px; 
                text-align:center;
                margin:0% 10% 0% 8%;
            }
            
            #topMenu ul li{
                list-style: none;
                background-color: #b30000;
                color:white;
                display:inline-block;
                line-height: 30px;
                vertical-align: middle;
   
            }
            
            #topMenu .menulink{
                text-decoration:none; 
                color:beige;
                display: block;
                width: 150px;
                font-size: 15px;
                font-weight: bold;
                font-family:"Trebuchet MS", Dotum, Arial;
                
            }
            #topMenu .menulink:hover{
                color:#e62e00;
                background-color:#ffe6cc;
            }
            

어떻게 해야되나요?