调整浏览器窗口大小时，导航中的文本会与标题重叠

Question

HTML

  <!--Head-->
    <div class="header_image">
        <!-- <div class="leftImage"> -->
            <img class="center_image" src="Final_Logo.png"/>
    <!--    </div> -->
        <!-- <div class="rightText"> --> <!-- I have commented these div so as to see if by chance they work in one div but i Both case problem is occurring.-->
            <p>text<br>Contact Us</p>
        <!-- </div> -->
    </div>
    <!--Navigation Bar-->

    <div class="header" id="change">
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">How It Works</a></li>
            <li><a href="">Experts</a></li>
            <li><a href="">Ask</a></li>
            <li><a href="">Blog</a></li>
            <li><a href="">Login</a></li>
            <li><a href="">Register</a></li>
       </ul>
    </div>

CSS代码

    body
    {
        background-image:url("LivingRoom.jpg"); 
        background-repeat:no-repeat; 
        background-attachment:fixed;
        width:100%;

    }
    .header 
    {
        display:inline-block;
        background-color:#000000;
        width:100%;
        height:6%;
        position:fixed;
        top:0;
        left:0;
        z-index:99;
        margin:4% auto;
        text-align:center;
        white-space:nowrap;
    }
    #change.header2 /*this css is used for scrolling purpose. Its code is in javascript*/
    {
    display:inline-block;
    background-color:#000000;
    width:100%;
    height:6%;
    position:fixed;
    top:0;
    left:0;
    z-index:99;
    margin:0 auto;
    text-align:center;
    white-space:nowrap;
}
ul
{
list-style:none;
display:inline-block;
width:100%;
margin:0 auto;
white-space:nowrap;
}
li
{
padding-top:.5%;
display:inline-block;
text-align:center;
white-space:nowrap;/*When I add width then when browser is resized text in menu overlaps*/
}

a:link, a:visited
{
display:inline-block;
width:150px;
text-align:center;
padding-left:1.5%;
padding-right:1.5%;
text-decoration:none;
color:white;
font-size:150%;
margin:0 auto;
}

a:hover,a:active
{
background-color:white;
color:black;
}

.header_image/*This is the header above menu when browser is resized the menu scrolls to the top of header*/
{
float:left;
top:0;
left:0;
right:0;
background-color:white;
height:8.5%;
width:100%;
}

当我调整浏览器窗口的大小时，导航栏向上移动，与徽标和标题中的其他信息重叠。我也面临一个问题，即当我调整浏览器大小时，如果我向{添加宽度，文本会相互重叠{1}}标记。如何避免使用宽度重叠？请建议。