How to center list items for mobile screens - css

Question

When I shrink the browser for mobile screens,lists which are in footer, doesnt seem centered.
You can see it on this link:
https://www.sac-ekimi.deniz-tasarim.site/bize-ulasin/
( "Hakkımızda" and "Destek" lists )
How to center them?
Here is the codes for these lists:
<div class="col-sm-3" style="margin-left:auto; margin-right:auto;" >
<h5 style="text-align: center;"><?php
// Using the global argment
global $redux_demo; // Same as your opt_name
echo $redux_demo['footer-text-1']; ?></h5>
<ul>
<li style="display: inline-block; "><a href="#">
<?php wp_nav_menu( array(
'theme_location' => 'menu_name',
'container' => "nav",
'container_class' => "topnav",
'container_id' => "topnav",
'menu_class' => "topmenu",
'menu_id' => "topmenu",
)
);
?>
</a></li>
</ul>
</div>
<div class="col-sm-3 footermenu" style="margin-left:auto; margin-right:auto;">
<h5 style="text-align: center;"><?php
// Using the global argment
global $redux_demo; // Same as your opt_name
echo $redux_demo['footer-text-2']; ?></h5>
<ul >
<li style="display: inline-block;"><a href="#" >
<?php wp_nav_menu( array(
'theme_location' => 'menu_name2',
'container' => "nav",
'container_class' => "topnav",
'container_id' => "topnav",
'menu_class' => "topmenu",
'menu_id' => "topmenu",
)
);
?>
</a></li>
</ul>
</div>

Answer 1

It appears the browser is adding padding-left: 40px; to all uls on the page as part of its default styling. You could fix this by adding a CSS Reset to your project but at this point, that will likely break a lot more code than it will fix. Its generally advised to plug in a CSS Reset at the start of a project.
To resolve this issue alone, I'd recommend overwriting the the ul#topmenu like so:
#topmenu {
padding-left: 0;
}
This will resolve the extra padding you're seeing on your uls.
This will not completely resolve the alignment issues you're seeing on smaller screens. If a single word is longer than the parent containing it, it will overflow past the edge of the parent so as to keep the text readable.
I'd recommend re-flowing your footer on smaller screen sizes to be stacked.
Should look something like this:
#media (max-width: 767px) {
#myFooter .col-sm-3 {
flex: 0 0 100%;
max-width: 100%;
}
#myFooter .col-sm-3 ul {
padding-left: 0;
text-align: center;
}
}

Answer 2

For media queries to work, you need to include:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Between the tags.
https://www.w3schools.com/css/css_rwd_viewport.asp