html - Div unnaligned with other content but still in the wrapper -

html - Div unnaligned with other content but still in the wrapper -

hello working on shopify theme want customize. took footer , copied them between menu , image slider. did not alter in css nor html ( renamed id's , classes affected footer , renamed them). borders of div , perchance div goes out of alignment , bit more wider rest of content. here code , demo:

<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"> sporting summer:<br id="br_7" />what 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"> sporting summer:<br id="br_7" />what 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"> sporting summer:<br id="br_7" />what wear </h2> </div> </div>

and here 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 , (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 { 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; }

the code has width set on 100%, why not aligned properly. line of code looking is: .gridlock .row .row 102.083%, according browser on line 19 of stylesheet.css. affecting width of <div id="big-footer1" class="row">

html css responsive-design border