请问我这个当页面达到规定值时,为啥不能正常显示

<html>
<head>
<meta name="viewport" content="width=device-width"charset="utf-8">
<title>无标题文档</title>
<style>
html,body{
    width:100%;
    height:100%;
}
*{
    margin:0px;
    padding:0px;
}
body{
    margin:0px;
    padding:0px;
}
.one{
    position:fixed;
    left:0px;
    right:0px;
    background-color:#003;
    width:190px;
    height:100%;
}
.two{
    float:left;
    width:100%;
    margin-top:15px;
    height:100%;
}
.four{
    margin-left:200px;
    margin-right:310px;
    height:100%;
    background-color:#F03;
}
.three{
    width:300px;
    margin-left:-300px;
    height:100%;
    background-color:#0F6;
    float:left;
    margin-top:15px;
}
@media screen and(max-width:980px)
{
    .three{
        display:none;
    }
    .four{
        margin-right:0px;
    }
}
@media only screen and(max-width:764px)    
{
    .one{
        display:none;
    }
    .four{
        margin-left:0px;
    }
}
</style>
</head>

<body>
<div class="one"></div>
<div class="two">
<div class="four"></div>
</div>
<div class="three"></div>
</body>
</html>

因为and后面需要一个空格

这是要实现个什么功能啊