为什么在gallery区域设置的黑色背景颜色会跑偏位置？

问题1：Gallery区域，在一个div里面嵌套两行div 分别第一行是图片第二行是黑色背景颜色，将图片和黑色背景都左边浮动了。为什么图片是正常的从左到右，而黑色背景的位置却跑偏了？怎么才能够让他在图片的下方显示？

问题2：现在搞这个有点懵圈，设置float后想要把内容从左边往右边排列是需要分别设置在div里面所嵌套的每个div还是直接写在外边包裹里面的DIV？

*{
    padding:0;
    margin:0;

}
.clear{
    clear:both;
}
.header{
    background: #07cbc9;
    width:100%;
    height:80px;
    position: fixed;    
    top:0;
    z-index:2;
}
.logo{    
    float:left;
    padding-left:80px;
    padding-top:20px;
}

.nav{
    float:right;
    padding-right:50px;
    padding-top:0;
    line-height:80px;
    height:80px;
}
.nav ul li{
    display:block;
    padding-right:20px;
    float:right;
    color:white;
}
.banner .bgcolor{
    background:black;
    width:100%;
    height:800px;
    position: absolute;
    opacity: 0.5;
}
.banner img{
    width:100%;
    height:800px;
    padding-top:0;
}

.banner{
    width:100%;
    padding-top: 0;
    
}
.banner  input{
    width:500px;
    height:50px;
    border:2px solid #ccc;
    margin:10px;
    
}
.banner input:hover{
    border: 2px solid #07cbc9;
}
.banner textarea:hover{
    border: 2px solid #07cbc9;
}

.banner  textarea{
    width:500px;
    height:115px;
    border:2px solid #ccc;
    margin:10px;
}

.banner .text{
    padding-top: 0;
    
    
}
.divtext{
    position: absolute;
    height:800px;
    width:100%;
    text-align: center;
    top:241px;
    
    
}
.container{
    padding-top: 80px;
   
}
input,textarea{
    background: transparent;
    color: gray;        
    font-size: 14px;
}
.about{
    width:100%;
    height:800px;
    text-align: center;
    
}
.about img{
    width:568px;
    height:380px;
    position: absolute;
    
    
    z-index:-1;
} 

.about .abtext .line{
    margin:10px auto;
}

.about .abtext .text3{
    color:gray;
    font-size: 12px;
    margin:55px;
}
.about .abtext .text1 {
    font-weight: bold;
    font-size: 48px;
    
}
.abtext{
    padding-top:50px;

}
.about .abtext .line{
    background: #07cbc9;
    width:40px;
    height:2px;
    text-align: center;
}
.about .button{
width:102px;
height:45px;
line-height:45px;
background:black;
color:white;
font-size: 14px;
margin-top: 20px;
position: absolute;


}
.about .button1{
    margin-left:-800px;
    position: relative;
    z-index:1;
    
}
.about .bk1{
    position: relative;
    background:white;
    opacity: 0.8;
    height:246px;
    top:-200px;
    z-index:-1;
}
.container .about .bottom{
    width: 1200px;
    height:500px;
    margin: 50px auto;
    position: relative;
    
}
.container .about .bottom h3,.middle ,.left,.right{
    float:left;

}
.container .about .bottom .right .topbk , .bottombk{
    width:238px;
    height:144px;
    border:1px solid #07cbc9;
    margin-bottom: 30px;
    margin-left: 720px;
}
.container .about .bottom .middle img{
    padding-left:126px;
}

.about .bottom .right .topbk .line{
    background: #07cbc9;
    width:40px;
    height:2px;
    margin-left:100px;
    margin-top:15px;
}
.about .bottom .right .topbk .text1{
    font-size:30px;
    font-weight: bold;
    padding-top:20px;
}
.about .bottom .right .topbk .text2{
    
    padding-top:10px;
    font-size:20px;
    font-weight: bold;
    
}

.about .bottom .right .bottombk .line{
    background: #07cbc9;
    width:40px;
    height:2px;
    margin-left:100px;
    margin-top:15px;
}
.about .bottom .right .bottombk .text1{
    font-size:30px;
    font-weight: bold;
    padding-top:20px;
}
.about .bottom .right .bottombk .text2{
    
    padding-top:10px;
    font-size:20px;
    font-weight: bold;
}
.container .about .bottom .fly{
    float:left;
    position: absolute;
    top:150px;
    left:50px;
    z-index: 1;
    text-align: left;
    color:black;
}


.container .about .bottom .fly .bgc{
    background: white;
    opacity: 0.5;
    width: 370px;
    height: 246px;
    position: absolute;
    top:-40px;
    left:-40px;
    z-index: -1;
    border:1px solid gray;
}

.container .abouttwo{
    width: 100%;
    height:800px;
    
}
.container .abouttwo .line1 .bgc{
    width: 25%;
    height: 400px;
    background: #07cbc9;
    float:left;
    position: relative;
}

.container .abouttwo .line1>div{
    position: relative;
    width:25%;
    height:400px;
    float: left;
}
.container .abouttwo .line1 img {
    float: left;
    width:100%;
    height: 100%;
    position: relative;
}
.sj:before{
    content: "";
    position: absolute;
    width:0;
    height:0;
    right:0;
    border-top:15px solid transparent;
    border-right:25px solid #07cbc9;
    border-bottom:15px solid transparent;
    top:185px;
    z-index: 999;
}
.sj2:before{
    content: "";
    position: absolute;
    width:0;
    height:0;
    left:0;
    border-top:15px solid transparent;
    border-left:25px solid #07cbc9;
    border-bottom:15px solid transparent;
    top:185px;
    z-index: 999;
}
.container .abouttwo .line1 , .line2{
    width: 100%;
    height:350px;
    
}

.container .abouttwo .line1 .bgc h3, .container .abouttwo .line1 .bgc p{
    color: white;
    padding:15px 100px;
}
.line1 .bgc h1{
    padding-top:40px;
    padding-left:100px;
    color: white;
}
.container .abouttwo .line1 .bgc .button{
        width:102px;
        height:45px;
        line-height:45px;
        background:black;
        color:white;
        font-size: 14px;
        margin-top: 25px;
        margin-left: 40%;
        position: absolute;
}
.container .gallery{
    width:100%;
    height:1000px;
    text-align: center;
    padding-top:50px;
}
.container .gallery h1{
    font-size: 48px;
}
.container .gallery .line {
    height:2px;
    width:30px;
    background: #07cbc9;
    margin:20px auto;
}
.container .gallery .toptext p{
    line-height:30px;
    color:gray;
}
.container .gallery .lineall .bgc{
    width:360px;
    height:64px;
    background: black;
    margin: 0 auto;
    color:white;
    float:left;
    
}
.container .gallery .img1 img,.img2 img{
    width:360px;
    height:240px;
    margin:0 auto;
}
.container .gallery .lineall .line1 div,.container .gallery .lineall .line3 div{
    float:left;
    margin:10px 10px;
    
   
   
}
.container .gallery .lineall .line1 , .line3 {
    padding-left:50%;
    margin-left:-555px;
   
    
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
    <div class="logo">
    <img src="./images/logo.png">
    </div>
    
    <div class="nav">
        <ul>
            <a href="#"><li>HOME</li></a>
           <a href="#"><li>ABOUT</li></a>
           <a href="#"><li>GALLERY</li></a>
           <a href="#"><li>FACULTY</li></a>
           <a href="#"><li>EVENTS</li></a>
           <a href="#"><li>CONTACT</li></a>
        </ul>
    </div>
</div>
<div class="clear"></div>
<!-- Container区域 -->
<div class="container">
    <!-- bannert区域 -->
<div class="banner">
        <div class="bgcolor"></div>
        <img src="./images/banner3.jpg">
        <div class="divtext">
                <form>
                        <input type="text" name="name"  placeholder="your Name"/>
                        <br>
                        <input type="text" name="name"  placeholder="your Phone"/>
                        <br>
                        <input type="text" name="name"  placeholder="your Email"/>
                        <br>
                        <textarea name="write"  placeholder="Wirte Your Comment Here"></textarea>
                        <br>
                        <input type="submit" name="button" value=" SEND MESSAGE"/>
                    </form>
                </div>
        </div>
        <div class="clear"></div>
     <!-- about区域 -->
        <div class="about">
         <!-- 文本区域上 -->
        <div class="abtext">
        <div class="text1">ABOUT</div>
        <div class="line"></div>
        <div class="text2">Lorem ipsum is simply dummpy text of the printing and typesetting <br>industy. Lorem Ipsum has been the industry's standard dummy<br> text ever since the 1500s.</div>    
        </div>
         <!-- 文本区域下-->
         <div class="bottom">

            <div class="left">
                <h1>A WORD<br> ABOUT US</h1>
            </div>
            
            <div class="middle">
                <img src="./images/bb3.jpg">
            </div>

            <div class="right">
                <div class="topbk">
                    <div class="text1">70000</div>
                    <div class="line"></div>
                    <div class="text2">students</div>
                </div>

                <div class="bottombk">
                        <div class="text1">600</div>
                        <div class="line"></div>
                        <div class="text2">faculty</div>
                </div>              
            </div>

            <div class="fly">
                <P>praesent dignissim viverra est,sed<br> bibendum ligula congue non.sed ac nisl<br> et felis gravida commodo?Suspendisse<br> eget ullamcoper ipsum.suspendisse<br> diam amet.</P>
                <button class="button">EXPLORE</button>
                <div class="bgc"></div>
                </div>
        </div>
        <!-- about区域 -->
    </div>
    <div class="abouttwo">
        <!-- line1区域 -->
        <div class="line1">
            <div><img src="./images/b1.jpg">
                <div class="sj"></div>
            </div>
            <div class="bgc">
                <h1>Library</h1>
                             <h3>
                                Lorem Ipsum is simply dummy text of the printing and typesettingindustry
                             </h3>
                             <p>
                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                             </p>
                             <button class="button">EXPLORE</button>
            </div>
            <div><img src="./images/b2.jpg">
                <div class="sj"></div>
            </div>
            <div class="bgc">
                <h1>Computer Lab</h1>

                            <h3>
                                Lorem Ipsum is simply dummy text of the printing and typesettingindustry
                            </h3>
                            <p>
                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                            </p>
                            <button class="button">EXPLORE</button>
            </div>
        </div>

       <!-- line2区域 -->
        <div class="line2">
                <div class="line1">                      
                        <div class="bgc">
                            <h1>Conference Hall</h1>
                            <h3>
                             Lorem Ipsum is simply dummy text of the printing and typesettingindustry
                             </h3>
                             <p>
                             Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                            </p>
                            <button class="button">EXPLORE</button>
                        </div>
                        <div><img src="./images/b3.jpg">
                            <div class="sj2"></div>
                        </div>                       
                        <div class="bgc">
                            <h1>Play Ground</h1>
                            <h3>
                                Lorem Ipsum is simply dummy text of the printing and typesettingindustry
                            </h3>
                            <p>
                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                            </p>
                            <button class="button">EXPLORE</button>
                        </div>
                        <div><img src="./images/b4.jpg">
                            <div class="sj2"></div>
                        </div>
                    </div>
        </div>
        <!-- abouttwo区域 -->
    </div>
    <div class="gallery">
        <!-- Gallery区域 -->
        <div class="top">
            <h1>Gallery</h1>
        </div>
        <div class="line"></div>
        <div class="toptext">
            <p> Lorem Ipsum is simply dummy text of the printing and typesetting <br>industry Lorem Ipsum has been the industry's standard dummy text<br> ever since the 1500s
            </p>
        </div>
        <div class="lineall">
            <!-- line all 区域 -->
        <div class="line1">
             <!-- line 1 区域 -->
                <div><img src="./images/03-01.jpg"></div>
                <div><img src="./images/03-02.jpg"></div>
                <div><img src="./images/03-03.jpg"></div> 
        </div>
        <div class="line2">
                <div class="bgc">1</div>
                <div class="bgc">2</div>
                <div class="bgc">3</div>
               </div>

        <div class="line3">
             <!-- line 2 区域 -->
            <div><img src="./images/03-04.jpg"></div>
            <div><img src="./images/03-05.jpg"></div> 
            <div><img src="./images/03-06.jpg"></div> 
         </div>

         <div class="line4">
                <div class="bgc">4</div>
                <div class="bgc">5</div>
                <div class="bgc">6</div>
               </div>

          <!-- line all 区域 -->
         </div> 
        
        <!-- Gallery区域 -->
    </div>
<!-- Container区域 -->
</div>
</body>
</html>