Text not wrapping properly on mobile

Hi, I’m using Vantage and am having trouble with the text wrapping on mobile. There’s a little bit extra on the right side that I need to scroll over to see. My custom CSS is below. Here’s how it looks in responsive, which is what I want, and iPhone X, which is being cut off on the right. Does anyone have any suggestions? Thanks so much for your help!

/* Main Container */

#main {
	min-height: 600px;
    background-position: center top!important;
}

/*article treatment*/
article {
	width: 90%;
	max-width: 900px;
  margin: 2rem auto;
 	padding: 2.5em 5em;
	background: rgba(255,255,255,0.93);
	-webkit-box-shadow: 0px 8px 20px 5px rgba(0,0,0,0.40);
	-moz-box-shadow: 0px 8px 20px 5px rgba(0,0,0,0.40);
	box-shadow: 0px 8px 20px 5px rgba(0,0,0,0.40);
  min-height: 100px;
  }

/*search results*/
.searchresults article {max-height: 75px!important;}

/* header formatting */
h1 {
font-size: 2.5em;
font-weight: 700;
margin:0;
padding:0!important;
}
h2 {
font-size: 1.5em;
margin:0;
padding:0!important;
}
h3 {
font-size: 1em;
font-weight: 700;
margin:0;
padding:0;
}

/* Hide Circle Icon More Link */
.widget_circleicon-widget .circle-icon-box a.more-button { display: none; }

/* Site title width so that it wraps in iPad */
@media only screen 
and (min-device-width : 768px)
and (max-device-width : 1024px)  {
  .site-title {
    max-width: 400px!important;
  }
}

/*Making menu text larger*/
.main-navigation {
  font-size: 2em!important;
}