Need CSS for mobile version of website

Hi —

I’m having a problem with the mobile version of new site using WP2017. For the desktop version I set up page at 100% width with a single column in middle of page at 50% width. Code I used is below.

Problem is I do not know what the CSS should be for the mobile version. The code below translates into a very skinny column down the centre of mobile pages. You see this when you click on each menu title and visit the individual menu page, not when you land on the site home page and scroll down to the last page.

Can someone tell me what code I should add (and where in the Additional CSS section) or how to fix this problem to get a proper view (i.e. wider column in middle of mobile pages)?

Thanks!

@media screen and (min-width: 48em) {
.wrap {
max-width: 100%;
/* padding-left: 3em; */
/* padding-right: 3em; */
}
}

.page.page-one-column:not(.twentyseventeen-front-page) #primary {
/*margin-left: auto;*/
/*margin-right: auto;*/
max-width: 50%;
}