Objects are shifted to the right on mobile devices.

Question

Do not minus much, I'm just learning. The task was to edit the site, add a list of cities where the company operates. On the desktop, the list is displayed in the center as it should be. On mobile devices, the title is centered, and the list is shifted to the right. What to fix so that everything was in the center. Website: ceiling-tension. White, listing in the footer. I attach the code of the list.

.cities { text-align: center; background: #545960; width: 100%; padding: 10px; margin: 0 auto; } .block { text-align: center; font-family: Helvetica, Roboto; display: inline-block; height: auto; width: 250px; font-size: 16px; line-height: 25px; } .cities p { font-family: Helvetica, Roboto; color: #ffffff; padding: 5px 0px 0px 0px; margin-bottom: 30px; font-size: 30px; } .cities a { color: #ffffff; text-decoration: none; } .cities a:hover { color: #d6b460; }

 <div class="cities"> <p>Мы работаем в следующих городах</p> <div class="block"> <ul style="list-style: none;"> <li><a href="http://xn--h1aeefu.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Минск</a></li> <li><a href="http://xn--c1aescj1g.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Гомель</a></li> <li><a href="http://xn--b1abglpdo.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Могилев</a></li> <li><a href="http://xn--c1ac1acci.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Гродно</a></li> <li><a href="http://xn--90abjlm5be.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Витебск</a></li> </ul> </div> <div class="block"> <ul style="list-style: none;"> <li><a href="http://xn--90ai6aff.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Брест</a></li> <li><a href="http://xn--90aayernio.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Бобруйск</a></li> <li><a href="http://xn--80aabg4aa6aip9e.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Барановичи</a></li> <li><a href="http://xn--90acrxbki.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Борисов</a></li> <li><a href="http://xn--h1aeigm.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Пинск</a></li> </ul> </div> <div class="block"> <ul style="list-style: none;"> <li><a href="http://xn--80a1ag6a.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Орша</a></li> <li><a href="http://xn--g1ajgj8ch.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Мозырь</a></li> <li><a href="http://xn--c1ajhbodocg.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Солигорск</a></li> <li><a href="http://xn--80ahll.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Лида</a></li> <li><a href="http://xn--b1aqcgfbabg7e.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Новополоцк</a></li> </ul> </div> <div class="block"> <ul style="list-style: none;"> <li><a href="http://xn--d1acqdicbd3f.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Молодечно</a></li> <li><a href="http://xn--j1abibc9b.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Полоцк</a></li> <li><a href="http://xn--90ajhkmd.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Жлобин</a></li> <li><a href="http://xn--d1adhucd.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Жодино</a></li> <li><a href="http://xn--b1acfvdsbqchf.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Светлогорск</a></li> </ul> </div>

Accepted Answer · 2018-06-26T16:41:46

Need to get rid of the padding at ul . Select the desired selector (instead of ul ).

 ul { margin: 0; padding: 0; } .cities { text-align: center; background: #545960; width: 100%; padding: 10px; margin: 0 auto; } .block { text-align: center; font-family: Helvetica, Roboto; display: inline-block; height: auto; width: 250px; font-size: 16px; line-height: 25px; } .cities p { font-family: Helvetica, Roboto; color: #ffffff; padding: 5px 0px 0px 0px; margin-bottom: 30px; font-size: 30px; } .cities a { color: #ffffff; text-decoration: none; } .cities a:hover { color: #d6b460; }

 <div class="cities"> <p>Мы работаем в следующих городах</p> <div class="block"> <ul style="list-style: none;"> <li><a href="http://xn--h1aeefu.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Минск</a></li> <li><a href="http://xn--c1aescj1g.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Гомель</a></li> <li><a href="http://xn--b1abglpdo.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Могилев</a></li> <li><a href="http://xn--c1ac1acci.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Гродно</a></li> <li><a href="http://xn--90abjlm5be.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Витебск</a></li> </ul> </div> <div class="block"> <ul style="list-style: none;"> <li><a href="http://xn--90ai6aff.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Брест</a></li> <li><a href="http://xn--90aayernio.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Бобруйск</a></li> <li><a href="http://xn--80aabg4aa6aip9e.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Барановичи</a></li> <li><a href="http://xn--90acrxbki.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Борисов</a></li> <li><a href="http://xn--h1aeigm.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Пинск</a></li> </ul> </div> <div class="block"> <ul style="list-style: none;"> <li><a href="http://xn--80a1ag6a.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Орша</a></li> <li><a href="http://xn--g1ajgj8ch.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Мозырь</a></li> <li><a href="http://xn--c1ajhbodocg.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Солигорск</a></li> <li><a href="http://xn--80ahll.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Лида</a></li> <li><a href="http://xn--b1aqcgfbabg7e.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Новополоцк</a></li> </ul> </div> <div class="block"> <ul style="list-style: none;"> <li><a href="http://xn--d1acqdicbd3f.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Молодечно</a></li> <li><a href="http://xn--j1abibc9b.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Полоцк</a></li> <li><a href="http://xn--90ajhkmd.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Жлобин</a></li> <li><a href="http://xn--d1adhucd.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Жодино</a></li> <li><a href="http://xn--b1acfvdsbqchf.xn----8sbsmbfqccabgc7bh2s.xn--90ais">Светлогорск</a></li> </ul> </div>

PS: But in general, you turn on emulation in chrome and what if the CSS class doesn't work?

Ahead =)) You also need to remove the inner indent on the left.
The whole problem is that the author did not remove the indents of all the elements, although he had previously asked the question exactly.
@Arthur, I meant that I made the edit about padding before your comment, that is, I beat you twice in this answer - first with the answer itself, then with padding :)

Objects are shifted to the right on mobile devices.

1 answer 1

More articles: