html - 为什么我的导航栏和页脚没有拉伸(stretch)到全宽？

Question

为什么我的导航栏和页脚没有拉伸(stretch)到全宽？
我试图删除 d 'CLASSNAME' 的容器，但仍然没有任何反应，我知道这很简单，也许我只是在看它。

    body {
       font: 15px/1.5 Arial, Helvetica, sans-serif;
       padding:0;
       margin-left:  200px;
    margin-right:  200px;

      background: linear-gradient(90deg, gainsboro 0%, rgb(255,255,255) 10%,
                                                        rgb(255,255,255) 90%, gainsboro 100%);
    
}



.CLASSNAME {
    position:relative
} 
/*Global*/
.container{
    width:100%;
    margin:auto;
    overflow:hidden;
}

ul {
  position: absolute;
  top: 0px;
  right: 16px;
}



/*Header*/
header{
    background: #19252A;
    color:#ffffff;
    padding-top:5px;
    min-height:70px;
    
  
}

header a{
    color: #ffffff;
    text-align: center;
    text-decoration:none;
    text-transform: uppercase;
    font-size:11px;
    font-weight: bold;
    padding: 0px;
    
}




header li{
    /*float:left;*/
    display:inline;
    padding: 0 5px 0 5px; 
}

.logo{
    padding-left: 75px;
    padding-bottom: 1px;
    padding-top: 2px;
}

nav{
    width: 100%;
    display: inline-block;
    
}

header nav{
    float:right;
    margin-top:10px;

}

header .highlight, header .current a{
    color:#e8491d;
    font-weight:bold;
    
}

header a:hover{
    color:#cccccc;
    font-weight:bold;
}


/*Slideshow*/

.slideshow{
    height: 425px;
    width: 100%;
}



.slide_img{
    position: absolute;
    width: 100%;
    height: 426px;
}

.slide_img img{
    width: 100%;
    height: 100%;
}

#i1, #i2, #i3, #i4{
    display: none;
} 

.pre, .nxt {
    width: 12%;
    height: 100%;
    position: absolute;
    top: 0;
    background: rgba(88,88,88,-4); 
    z-index: 99;
    cursor: pointer; 
}

.pre{
    left: 0; 
}

.nxt{
    right: 0;
} 

.nav{
    width: 100%;
    height: 50px;
    bottom: 12%;
    position: relative;
    padding-top: 370px;
    text-align: center;
    z-index: 99;
    
}


.dots{
    top: -5px;
    width: 18px;
    height: 18px;
    margin: 0 4px;
    position: relative;
    border-radius: 50%;
    display: inline-block;
    background: rgba(0,0,0,.6);
}

.slide_img{
    z-index: -1;
}

#i1:checked ~ #one,
#i2:checked ~ #two,
#i3:checked ~ #three,
#i4:checked ~ #four{
    z-index: 9;
}

#i1:checked ~ .nav #dot1,
#i2:checked ~ .nav #dot2,
#i3:checked ~ .nav #dot3,
#i4:checked ~ .nav #dot4{
    background: #fff;
}

/*Footer*/

footer {
       text-transform: uppercase;

   
    background: #19252A;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #fff;
    padding-bottom: 20px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    border-bottom: 0px solid #fff;
    border-top: 15px solid #fff;
    font-size: 7.5px;
}


 .box2 p {
      position:relative;
        float:left;
        
    }

<script type="text/javascript" src="scripts.js"></script>
    <header>
        <div class="container">
            <div class="CLASSNAME">
           <div>
                    <a href="index.html">
                        <img class="logo" src="img/stars-logo.png" alt="" />
                    </a>
                

                <nav>
                    <ul>
                        <li><a href="">About Us</a></li>
                        <li><a href="">Workshops</a></li>
                        <li><a href="">Classes</a></li>
                        <li><a href="">Our Teachers</a></li>
                        <li><a href="">Our Kids</a></li>
                        <li><a href="">Out Of School</a></li>
                        <li><a href="">Twinkle Parties</a></li>
                        <li><a href="">Contact Us</a></li>
                    </ul>
                </nav>
                </div>
             

            </div>
        </div>
        </header>
    
        <div class="container">
            <div class="CLASSNAME">
                <input type="radio" name="images" id="i1" checked>
                <input type="radio" name="images" id="i2">
                <input type="radio" name="images" id="i3">
                <input type="radio" name="images" id="i4">
                       
                <div class="slide_img" id="one">
                <img src="img/STARS%2027.jpg">
                    <label for="i4" class="pre"></label>
                    <label for="i2" class="nxt"></label>

                </div>
                
                <div class="slide_img" id="two">
                <img src="img/STARS%2020.jpg">
                    <label for="i1" class="pre"></label>
                    <label for="i3" class="nxt"></label>
                </div>                   
             
                <div class="slide_img" id="three">
                <img src="img/STARS%2027.jpg">
                    <label for="i2" class="pre"></label>
                    <label for="i4" class="nxt"></label>
                </div>
            
                <div class="slide_img" id="four">
                <img src="img/STARS%2020.jpg">
                    <label for="i3" class="pre"></label>
                    <label for="i1" class="nxt"></label>
                </div>
                
                <div class="nav">
                <label class="dots" id="dot1" for="i1"></label>
                <label class="dots" id="dot2" for="i2"></label>
                <label class="dots" id="dot3" for="i3"></label>
                <label class="dots" id="dot4" for="i4"></label>
                    
                </div>
            </div>
        
        </div>
     <footer>
    
    <div class="container">
    <section class="footer">
        <div class="box2">
        <p>
            
            Phasellus urna eros, facilisis et faucibus sit amet, bibendum quis diam. <br/>Curabitur ornare ultricies pulvinar, facilisis et faucibus sit amet."
            </p>
        
        </div>
    </section>
          </div>
    </footer>

Answer 1

由于应用于 body 标签的样式，它的行为是这样的。

删除了 margin-left 和 margin-right 并添加了 margin: 0;

 body {
       font: 15px/1.5 Arial, Helvetica, sans-serif;
       padding:0;
       margin: 0;

      background: linear-gradient(90deg, gainsboro 0%, rgb(255,255,255) 10%,
                                                        rgb(255,255,255) 90%, gainsboro 100%);

}