Column not center aligned on mobile device - html

Question

I've created a WP site and on the homepage I've added a HTML widget with 3 columns. Everything is good except on mobile device the 3 columns are off to the right of the screen. I can't seem to center them when viewed on mobile as seen in the image below.
<div class="wrapper">
<!-- wp:columns {"columns":3} -->
<div class="wp-block-columns has-3-columns">
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading -->
<h2>News</h2>
<!-- /wp:heading -->
<!-- wp:image {"id":482,"align":"center","linkDestination":"custom"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="http://www.patricianprimaryschool.ie/wp-content/uploads/2019/03/Newsletter.png" alt="" class="wp-image-482"/> .
</figure></div>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:heading -->
<h2>Calendar</h2>
<!-- /wp:heading -->
<!-- wp:image {"id":481,"align":"center","linkDestination":"custom"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="http://www.patricianprimaryschool.ie/wp-content/uploads/2019/03/SchoolCalendar-01-1024x1024.png" alt="" class="wp-image-481"/></figure></div>
<!-- /wp:image --></div>
<!-- /wp:column -->
<div class="wp-block-column twitterContainer">
<!-- wp:column -->
<!-- wp:heading -->
<h2>Follow Us</h2>
<!-- /wp:heading -->
<!-- wp:html -->
<a class="twitter-timeline" data-height="300" data-theme="light" href="https://twitter.com/PPSNewbridge?ref_src=twsrc%5Etfw">Tweets by PPSNewbridge</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- /wp:html -->
<!-- /wp:column --></div></div></div>
<!-- /wp:columns -->
And my CSS:
.wp-block-column {
min-width: 220px;
max-width: 550px;
}
.wp-block-columns {
margin: 112px;
}
.wp-block-column {
border: 2px solid #354063;
padding: 2px 10px;
}

Answer 1

Your column divs have maximum width 550px and the parent div has 112px margin. When the screen size is less than (550+120*2) = 790px, the columns are aligning right. To prevent this, use margin 0 when the screen size is less than 800px. Use the following CSS to do that.
#media only screen and (max-width: 800px) {
.wp-block-columns {
margin: 0px;
}
}

Answer 2

Currently your column cannot be less than 220 pixels wide:
.wp-block-column {
min-width: 220px;
}
And the margins of the parent block cause the left edge of the column to be 112 pixels from the left edge of the screen:
.wp-block-columns {
margin: 112px;
}
Due to these two circumstances, the right edge of the column begins to go too far to the right on a narrow screen.
If you just comment on this property, the column will decrease and remain in the center of the mobile phone. But in these keys it becomes unreadable.
You need to change the behavior of this column on a mobile device. On a narrow screen it should occupy almost the entire width of the screen.
For example:
.wp-block-column {
border: 2px solid #354063;
padding: 2px 10px;
margin: 0 auto;
min-width: 220px;
max-width: 80%;
width: 550px;
}
.wp-block-columns {
margin: 112px auto;
}
img {
max-width: 100%;
}
<div class="wrapper">
<!-- wp:columns {"columns":3} -->
<div class="wp-block-columns has-3-columns">
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading -->
<h2>News</h2>
<!-- /wp:heading -->
<!-- wp:image {"id":482,"align":"center","linkDestination":"custom"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="http://www.patricianprimaryschool.ie/wp-content/uploads/2019/03/Newsletter.png" alt="" class="wp-image-482"/> .
</figure></div>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:heading -->
<h2>Calendar</h2>
<!-- /wp:heading -->
<!-- wp:image {"id":481,"align":"center","linkDestination":"custom"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="http://www.patricianprimaryschool.ie/wp-content/uploads/2019/03/SchoolCalendar-01-1024x1024.png" alt="" class="wp-image-481"/></figure></div>
<!-- /wp:image --></div>
<!-- /wp:column -->
<div class="wp-block-column twitterContainer">
<!-- wp:column -->
<!-- wp:heading -->
<h2>Follow Us</h2>
<!-- /wp:heading -->
<!-- wp:html -->
<a class="twitter-timeline" data-height="300" data-theme="light" href="https://twitter.com/PPSNewbridge?ref_src=twsrc%5Etfw">Tweets by PPSNewbridge</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- /wp:html -->
<!-- /wp:column --></div></div></div>
<!-- /wp:columns -->

Answer 3

you can adjust for mobile using this
#media only screen and (max-width: 600px) {
//your style goes here
body {
background-color: lightblue;
}
}
for more info visit w3school