Trouble with spacing display properties

[twilit fiber]

Hi all, I am working on the JS password generator but it is really the CSS I am having trouble with. Everything looks fine on a big screen/ window but on a smaller device/ viewport (checked using 'inspect' in chrome) everything shrinks down with useless borders on the left and right of the main container. I think it is flexbox related but that's an area I can't seem to get my head around.

I have the project on github: https://github.com/hummus-erectus/RandomPasswordGenerator

And it is deployed on netlify: https://robs-password-generator.netlify.app/

I can also post snippets if that is easier - sorry, this is my first time in this discord and I'm still getting used to everything. Thanks for any advice!

EDIT: Here it is in scrim form but the issue is only visible from smaller viewports (eg mobile)
https://scrimba.com/scrim/co9a4405ea07c451320eccacb

[deft flower]

Is this a little closer to what you're trying to do? You're going to have to play around with it a little, because now the padding is way too big on desktop. You can either use a media query or just play with the container padding/margins to get what you want.