遇到个奇怪的问题

老师请问一下一个关于banner图的问题：

我先将css样式表写在另一个文件中，用link链接，但是发现下图两种情况既然效果不一样：

然后我准备用style放样式表来问老师，结果在style里两种情况又一样了…………

在单独的用link链接的样式表中，.banner 写的样式，可以将图片宽高限制，但是用.main .banner的时候，img的宽高，banner的都不受控制了，找不到原因……

我把放style里的代码放在下面，麻烦老师把将style里的样式用另一个css文件保存，用link链接，试试我说的两种情况，真的很感谢老师，现在很困惑…………

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>大作业</title>
<style>
*{
    margin:0;
    padding:0;
}
/*网页顶部*/
.header{
    width:100%;
    height:70px;
    background-color:#07cbc9;
    font-family:"Microsoft YaHei UI";
    position:fixed;
}
.header a{
    text-decoration:none;color:white;
}
.header a:hover{
    color:yellow;
}
/*顶部logo*/
.logo{
    float:left;
    margin:11px 0 0 120px;
}
/*导航区*/
.nav ul{
    float:right;
    height:70px;
    padding-right:50px;
}
.nav ul li{
    float:left;
    list-style:none;
    font-size:16px;
    font-weight:bolder;
    padding-right:20px;
    line-height:70px;
}
/*主体部分*/
.main{
    width:100%;
}
/*banner图*/
.main .banner{
    width:100%;
    height:400px;
    padding-top:70px;
}
.main .banner img{
    width:100%;
    height:400px;
}
/*遮罩层*/

</style>
</head>
<body>
    
    <div class="header">
        
        <div class="logo">
            <a href="#"><img src="images/logo.png"/></a>
        </div>
        
        <div class="nav">
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">GALLERY</a></li>
                <li><a href="#">FACULTY</a></li>
                <li><a href="#">EVENTS</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </div>
    </div>
    
    <div class="main">
        
        <div class="banner">
            <img src="images/banner3.jpg"/>
        </div>
        
        <div class="mask-layer"></div>
        
        <div class="info-layer">
            <form>
               <input type="text" name="name" placeholder="your name">
               <input type="text" name="phone" placeholder="your phone">
               <input type="text" name="mail" placeholder="your E-mail">
               <textarea placeholder="write your commit here"></textarea>
               <button>sent massage</button>
            </form>
        </div>
        
        
        
    </div>
    <div class="footer"></div>
</body>
</html>