Responsive Column for mobile - html

Question

I have 3 columns created in html. It all looks good but the column with Twitter embedded will not stay the same size when the browser is reduced in size or when viewed on mobile.
Mobile View
Desktop View 1
Desktop View 2
No matter what I do its always either too big or too small. I have it in a
<div class="twitterContainer">
Because the twitter feed kept spilling out past the border.
I've tried media queries as seen in this answer
Stack Answer
Here's my latest code:
<!-- wp:columns {"columns":3} -->
<div class="wp-block-columns has-3-columns">
<!-- wp:column -->
<div class="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 --></div>
<!-- wp:column -->
<div class="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>
<div class="column">
<div class="twitterContainer">
<!-- wp:column -->
<div class="wp-block-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 --></div>
<!-- /wp:column --></div></div>
</div>
</div>
<!-- /wp:columns -->
*edit CSS Added
.wp-block-columns {
margin: 112px;
}
.wp-block-column {
border: 2px solid #354063;
padding: 2px 10px;
}
What am I doing wrong? TIA
**Edit

Answer 1

Ok. So you have your wp-block-column inside your twitterContainer. Remove the inner container and put the 2 classes together in 1 div.
So this:
<div class="twitterContainer">
<!-- wp:column -->
<div class="wp-block-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 --></div>
<!-- /wp:column --></div>
Becomes this:
<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>