Need CSS for mobile version of website

Hi —

I’m having a problem with the mobile version of new site. 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. At the moment, the code below translates into a very skinny column in centre of mobile pages. Can someone tell me what code I should add (and where) to get proper view (i.e. wider column in middle of 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%;
}