Div与其他内容不对齐，但仍在包装器中。

Question

你好，我正在做这个shopify主题，我想定制。我拿起页脚，把它们复制到菜单和图片滑块之间。我没有更改css或html中的任何内容(我只是重命名了影响页脚的id和类并将它们重命名)。但是div的边界(可能是div )偏离了对齐的范围，比其他内容的范围要宽一些。下面是代码和演示：

<div id="footer1"   >

  <div id="big-footer1" class="row">

    <div  class="desktop-4 tablet-2 mobile-3 alpha">

       <a href="/Shop/List/Gym_and_Fitness?cm_sp=homepage-_-fitnesst1-_-10-06-14" id="A_4"><img src="/mrporter/content/2014/home/100614/t1.jpg" alt="" id="IMG_5" /></a>
    <h2 id="H2_6">
           A SPORTING SUMMER:<br id="BR_7" />WHAT TO WEAR
    </h2>

    </div>

    <div class="desktop-4 tablet-2 mobile-3">


       <a href="/Shop/List/Gym_and_Fitness?cm_sp=homepage-_-fitnesst1-_-10-06-14" id="A_4"><img src="/mrporter/content/2014/home/100614/t1.jpg" alt="" id="IMG_5" />     </a>
                <h2 id="H2_6">
              A SPORTING SUMMER:<br id="BR_7" />WHAT TO WEAR
                    </h2>


    </div>       

    <div id="" class="desktop-4 tablet-2 mobile-3 omega">

       <a href="/Shop/List/Gym_and_Fitness?cm_sp=homepage-_-fitnesst1-_-10-06-14" id="A_4"><img src="/mrporter/content/2014/home/100614/t1.jpg" alt="" id="IMG_5" /></a>
    <h2 id="H2_6">
        A SPORTING SUMMER:<br id="BR_7" />WHAT TO WEAR
    </h2>
    </div>


  </div> 

下面是css：

#big-footer1 { 
border-left: 1px solid {{ settings.footer-top-border }}; 
border-right: 1px solid {{ settings.footer-top-border }};
margin-bottom: 0px; 
margin-top: 0px;
border-bottom: 0px solid {{ settings.footer-bottom-border }}; 

list-style-type: none; 
}

#big-footer1 .alpha { border-right: 1px solid {{ settings.dotted_color }}; }
#big-footer1 .omega { border-left: 1px solid {{ settings.dotted_color }}; }






@media screen and (max-width: 740px) {
#big-footer1 .alpha { border-right: 0px solid {{ settings.dotted_color }}; }
#big-footer1 .omega { border-left: 0px solid {{ settings.dotted_color }}; }
}


#big-footer1 { color: {{ settings.footer-text-color }}; }
#big-footer1 a { color: {{ settings.footer-text-color }}; }



#big-footer1 > div { padding: 0 20px; min-height: 120px;}


#big-footer1 ul {
list-style: none;
 margin: 0;
line-height: 34px;
}

#big-footer1 ul li { display: inline-block; margin: 0 5px; }

#footer1 { background: {{ settings.footer-background }}; padding-bottom: 20px; text-align: center; }

Answer 1

代码的宽度设置为100%以上，这就是为什么它没有正确地对齐。您要查找的代码行是：.gridlock .row .row 102.083%，根据我的浏览器，它位于stylesheet.css的第19行。这影响了<div id="big-footer1" class="row">的宽度。