帮助html5和css3

我需要帮助了解响应式网页设计。每次我向下或向上滚动屏幕时，屏幕宽度都开始改变。我所有的东西都在%的状态下，但我一点帮助都没有

#Main-Wrapper {
    width: 50%;
    margin: 0 auto;
    border: 1px solid #000;
}


.Main-Header {
    width: 100%;
    border: 1px solid #000;
}

.Main-Header nav {
    background-color: #DDD;
    border:1px solid #000;
    width: 60%;
    height: 40px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    position: relative;
    top: 42px; /* 42 px*/
}

这是我使用的代码

<div id="Main-Wrapper">
    <header class="Main-Header">
        <img src="css/Images/Logo.jpg">
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Home</a></li>
                </ul>
            </nav>

---

尝试删除.Main标题上的宽度。或者，如果不起作用，请添加以下内容：框大小：边框框

是的，它可以在布局上工作。但是仍然更改了

好的，谢谢您的快速重播，我将尝试一下，看看它是否工作。我在这里没有看到任何响应或滚动变化的内容。您能详细说明并创建一个JSFIDLE吗？