Padding on mobile

When viewing my site on mobile for the pages other than the front page whatever is in the main body container seems to have a lot of padding around it and that there is a lot of wasted blanks pace. Is there a way to edit the padding?

Sure, you can add this to a custom CSS plugin:

@media (max-width: 991px) {
   .site-content {
      padding: 0;

That worked great!

Now is there a way to resize some of the blank space inside my container that exists on the sides between the container side and the content.

If you look here its the white margins im trying to resize

That’s what you get for using the page builder in that situation: page padding+widget padding.
You can remove it like this:

.page .hentry {
   padding-left: 0;
   padding-right: 0;