我有这个简单的响应式网站正在运行，但我有一个问题

Question

我写了这个 html/css 代码并且我已经响应地布置了它但是当我调整它的大小时以响应查看主要内容之一上的文本信息区有一个很大的方形缺口！！我尝试了 margin 和 padding 之类的一切。这让我很困惑。同样在我的导航栏的移动版本上，我想要逐行显示的项目，但它们不会中断。所有的帮助都会赞赏。这是代码：

HTML: http://pastebin.com/JDzezxVe CSS: http://pastebin.com/9vJvk0Sw

*{margin: 0px;
    padding: 0px;}
 
body{
    background:#CCC;
    width: 70%;
    margin-left: 20%;
    margin-top: 0px;
    height: 900px;
}
 
.mainHeader{
        padding: 0;
        background:#666;
        height:36px;
        width:100%;
    border-radius: 5px;
    position: relative;
    top: 150px;
    left: -70px;
    box-shadow: 10px 10px 10px #767373;
}
 
.mainHeader nav ul li{
        display:inline-block;
        list-style:none;
        margin: 10px 0px 0px -30px;
    float: left;
    margin-left: 15px;
    position: relative;
    top:  -128px;
    left: 10px;
}
 
.mainHeader nav ul li a{
        text-decoration: none;
    border-radius: 3px;
    color: white;
    padding: 7px 20px 10px 20px;
    margin-right: -15px;
    font-family: 'Eras ITC';
}
 
.mainHeader nav ul li a:hover{
        background: #f18529;
}
 
.mainHeader nav ul .active {
        background: #f18529;
}
 
.mainInfo{
    background:white;
    height: 500px;
    width: 100%;
    position: relative;
    top: 200px;
    left: -70px;
    border-radius: 5px;
    box-shadow: 10px 10px 10px #727272 ;
}
 
.mainInfo .miInfo p{
    font-family: Arial;
    padding:  10px 10px 10px 10px;
    text-align: left;
}
 
.mainHeader .logoArea p{
    position: relative;
    top: -100px;
   
}
 
.mainHeader .logoArea img{
    position: relative;
    top: -130px;
    left: 230px;
   
}
 
@media only screen and (min-width: 150px) and (max-width: 600px) {
    body{
    width: 100%;
}
   
    .mainHeader{
            padding: 0;
            background:#666;
            height:70px;
            width:80%;
        border-radius: 5px;
        position: relative;
        top: 150px;
        left: -70px;
        list-style-type: none;
    }
 
    .mainHeader nav ul li{
        text-align: center;
        height: 100%;
        word-break: break-all;
 
}
 
 .mainHeader nav ul li a{
        width: 100%;
        height: 20px;
        padding:  10px 5px;
        display: inline-block;
        margin: 10px;
       
}
 .mainInfo{
    background:white;
    height: 300px;
    width:80%;
    position: relative;
    top: 200px;
    left: -70px;
    border-radius: 5px;
    box-shadow: 10px 10px 10px #727272;
 
   
}
 
.mainInfo .miInfo{
 
}
 
 
}

<html lang="en">
    <head>
             <link rel="stylesheet" type="text/css" href="StyleSheet.css">
        <meta charset="utf-8" />
        <title>Website</title>
    </head>
    <body class="body">
        <header class="mainHeader">
           <div class="logoArea">
                <img alt="logo" src="logo.jpg" width="250px" height="120px">
            </div>
            <nav><ul>
                <li><a class="active" href="Index.html">Home<br/></a></li>
                <li><a href="About.html">About<br/></a></li>
                <li><a href="Random.html">Random</a></li>
            </ul></nav>
        </header>
 
        <div class="mainInfo">
            <div class="miInfo">
                <p>This is where you can put some side information about your site! The user will most likely
                see this part second! This is where you can put some side information about your site! The user will most likely
                see this part second! This is where you can put some side information about your site! The user will most likely
                see this part second! This is where you can put some side information about your site! The user will most likely
                see this part second! This is where you can put some side information about your site! The user will most likely
                see this part second! </p>
            </div>
        </div>
 
    </body>
</html>

Answer 1

它正试图环绕 .mainHeader nav ul。将 float:left; 从 .mainHeader nav ul li 中删除，您应该已经准备就绪。

我有这个简单的响应式网站正在运行，但我有一个问题

I have this simple responsive website im working, but i have an issue

html

css

web-deployment

web