html - Div 未与其他内容对齐但仍在包装器中

Question

您好，我正在研究我想要自定义的 shopify 主题。我把页脚复制到菜单和图片 slider 之间。我没有更改 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"> 的宽度