안녕하세요 그누보드를 사용해서 사이트 제작연습을 하고 있습니다.

1차 메뉴인 gnb가 브라우저창 조절을 하면 이상하게 변경되는 현상이 있는데요!

제가 생각한것은 min, max? 이 두개값이 안정해져서 그런거 같지만 아무리 해도 안되서 

도움을 요청하고자 글을 남깁니다.

이랬던 메뉴가

이렇게 됩니다 ㅠㅠ

<-- index.php -->

<div class="nav">
    <nav id="gnb_test">
            <ul id="gnb_test_1dul">
                <li><a href=""> 새로운 가족이 생겼어요♡</a></li>
                <li><a href=""> 천국의 계단</a></li>
                <li><a href=""> 실종동물 찾기</a></li>    
                <li><a href=""> 병원 정보</a></li>    
            </ul>
</div>

<style>
li {float:left; list-style-type:none;display:inline-block;}
a {display:inline-block;}

</style>
</nav>

<\css/default.css>

#gnb_test{text-align:center;background:#fff;position:realtive;border-top:1px solid rgb(143, 140, 140);border-bottom:2px solid rgb(228, 225, 223);}
#gnb_test a{margin-left:30px;}
#gnb_test a:hover{color:red; background:#fff;}
#gnb_test li{padding:6.5px;}
#gnb_test h2{position:absolute;font-size:0;line-height:0;overflow:hidden}
#gnb_test .gnb_test_wrap{margin:0 auto;position:relative;text-align:center}
#gnb_test #gnb_test_1dul {display:inline-block;font-weight:600;font-size:1.083em;margin:10px 650px 10px;padding: 0 0 0;background:#fff;zoom:1;} /* 메인메뉴 위치조정 380px; mong */
#gnb_test ul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb_test .gnb_test_1dli{float:left;line-height:50px;padding:0 25px;position:relative;}
#gnb_test .gnb_test_1dli:hover{background:#fff;/*border-bottom:2px solid #e8180c;*/border-top:2px solid #e8180c; margin-top:-2px;}

모르겠습니다.. ㅠㅠ