Html 页脚无法填满页面的整个宽度

我试图让页脚跨过页面的整个宽度，但由于某些原因，它在左右两侧都留下了空白。我也不能让我的社交媒体图标放在页脚中间。我在页面顶部有一个转盘，可能会影响页脚，但我不确定

---

使用

容器流体

代替页脚div中的

容器

要使图像居中，请使用页脚标记上的

文本中心
类

<div class="container-fluid">
    <div class="row">
        <footer id="footer" class="text-center">    
            <a href="https://www.instagram.com/">
                <img class="instagram" src="instagram.png">
            </a>
            <a href="https://twitter.com/">
                <img class="icon" src="twitter.png">
            </a>
            <a href="https://www.facebook.com/">
                <img class="icon" src="facebook.png">
            </a>            
        </footer>
    </div>
</div>



或者，另一种方法是不对页脚使用容器和行div。只需使用页脚标记

        <footer id="footer" class="text-center">    
            <a href="https://www.instagram.com/">
                <img class="instagram" src="instagram.png">
            </a>
            <a href="https://twitter.com/">
                <img class="icon" src="twitter.png">
            </a>
            <a href="https://www.facebook.com/">
                <img class="icon" src="facebook.png">
            </a>            
        </footer>



将页脚标记保留在节div之外并与之平行

<div class="carousel" data-interval="5000">
   <section class="container">
      <div class="row">
         <div class="container">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
               <div class="carousel-inner">
                  <div class="item">
                     <img src="download.jpg" alt="Chicago" style="width:100%;">
                  </div>
                  <div class="item active">
                     <img src="download.jpg" alt="Chicago" style="width:100%;">
                  </div>
                  <div class="item">
                     <img src="download.jpg" "="" alt="Chicago" style="width:100%;">
                  </div>
                  <div class="item">
                     <img src="download.jpg" alt="Chicago" style="width:100%;">
                  </div>
                  <div class="item">
                     <img src="download.jpg" alt="Chicago" style="width:100%;">
                  </div>
               </div>
            </div>
            <!-- Left and right controls -->
            <!--  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
               <span class="glyphicon glyphicon-chevron-left"></span>
               <span class="sr-only">Previous</span>
               </a>
               <a class="right carousel-control" href="#myCarousel" data-slide="next">
               <span class="glyphicon glyphicon-chevron-right"></span>
               <span class="sr-only">Next</span>
               </a>   -->
         </div>
      </div>
      <div class="container">
         <div class="row">
            <a name="About">
               <h1 class="col-sm-12">About</h1>
            </a>
            <h4 class="col-sm-12">Palacios Beauty Salon was founded filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler</h4>
            <img src="ab-seal-horizontal.png">
         </div>
      </div>
      <hr>
      <div class="container">
         <div class="row">
            <a name="Who We Are">
               <h1 class="col-sm-12">Who We Are</h1>
            </a>
            <div>
               <p class="col-sm-6">3 to 4 sentences about owner/founder of Palacios filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler</p>
               <p>
                  <img class="col-sm-6 img" src="blank.png">
               </p>
            </div>
         </div>
      </div>
      <hr>
      <div class="container">
         <div class="row">
            <a name="Services">
               <h1 class="col-sm-12">Services</h1>
            </a>
            <ul>
               <li class="col-sm-4">Manicure        $20</li>
               <li class="col-sm-4">Pedicure        $20</li>
               <li class="col-sm-4">Shampoo         $20</li>
            </ul>
         </div>
      </div>
      <hr>
   </section>
   <div class="container-fluid">
      <div class="row">
         <footer id="footer" class="text-center">   
            <a href="https://www.instagram.com/">
            <img class="instagram" src="instagram.png">
            </a>
            <a href="https://twitter.com/">
            <img class="icon" src="twitter.png">
            </a>
            <a href="https://www.facebook.com/">
            <img class="icon" src="facebook.png">
            </a>            
         </footer>
      </div>
   </div>
</div>


感谢您的帮助，它修复了图像，但由于某些原因，容器流体和移除div对宽度没有帮助。你不知道为什么吗？我需要看看某个地方的代码帮我解决问题。上面提供的代码片段对您的问题没有任何线索。我只是建议了一些我认为是问题所在的一般性修复方法。如果您能提供一些小提琴链接，我可以帮助您增强ThenXenodocial-jepsen-daa504.bitballow.com使页脚标记与第一节标记平行。请参阅更新的答案