I don't recommend to remove the codes just add the code I've provided in this post. 

Have you tried to remove the sidebar from Dashboard > Appearance > Widgets admin page?

I can't do this as it will break my theme and not allow me to use the sidebar on non forum pages.  

In this case, please navigate to Dashboard > Forums > Settings > Styles admin page, put the following CSS in "Custom CSS Code" textarea, save it, delete all caches and check again:

@media screen and (max-width: 620px){
    #wpforo #wpforo-wrap {
        padding: 10px 1px !important;
    }
}

I was previously having an issue with blockquoted text inside posts running off the screen. I posted this problem in this thread. 

To resolve this, I was told to add the following code:

@media screen and (max-width:600px) {
      #wpforo #wpforo-wrap .wpforo-content{width:100%; }
      #wpforo #wpforo-wrap .wpforo-right-sidebar{width:100%;}
}

It looks familiar to the code that you mentioned.

Should I remove this when adding the code you mentioned??

There is a good amount of custom CSS on my forums settings.

Here is what it looks like now;  Let me know if I should just add that code above;

@media screen and (max-width:600px) {
#wpforo #wpforo-wrap .wpforo-content{width:100%; }
#wpforo #wpforo-wrap .wpforo-right-sidebar{width:100%;}
}

#wpforo #wpforo-wrap .wpforo-post-content .rh-container, 
#wpforo #wpforo-wrap .wpforo-post-content .content {
width: auto;
clear: right;
}

#wpforo #wpforo-wrap {
font-size: 13px; width: 100%; padding:10px 20px; margin:0px;
}
.wpforo-active{
background:red !important;
}
#wpforo #wpforo-wrap .wpforo-profile-wrap .h-footer .h-bottom{
display: block;
}
#wpforo #wpforo-wrap .wpforo-profile-wrap .h-bottom .wpf-profile-menu {
background-color: #FFFFFF;
}

-If I use my theme's "default" template on my created forum page....
1. The width of the forums on mobile browsers is perfect.  
2. However, the problem is that my theme's "default" template includes a sidebar, so on PC browsers, there is a big sidebar from my theme next to my forum pages.  See Photo Here

Have you tried to remove the sidebar from Dashboard > Appearance > Widgets admin page? 

-If I use my theme's "Full Width" template on my created forum page.....
1. It removes the sidebar and the forums look perfect on the PC browser.
2. However, the problem with the narrow width on mobile browsers is there.  See Photo Here

In this case, please navigate to Dashboard > Forums > Settings > Styles admin page, put the following CSS in "Custom CSS Code" textarea, save it, delete all caches and check again:

@media screen and (max-width: 620px){
    #wpforo #wpforo-wrap {
        padding: 10px 1px !important;
    }
}

The problem with the narrow width on mobile browsers only happens on the forum pages; no other pages on my theme.

-If I use my theme's "default" template on my created forum page....
1. The width of the forums on mobile browsers is perfect. 
2. However, the problem is that my theme's "default" template includes a sidebar, so on PC browsers, there is a big sidebar from my theme next to my forum pages.  See Photo Here

-If I use my theme's "Full Width" template on my created forum page.....
1. It removes the sidebar and the forums look perfect on the PC browser.
2. However, the problem with the narrow width on mobile browsers is there.  See Photo Here

Thank you for the help.  

It's made by WordPress theme design on our website. The width on your website come from your WordPress Theme page design. We can help you with some small CSS code to remove that space. This is not a wpForo issue, this is a theme issue, so we need your forum URL to debug your theme CSS code. Please leave some URL

It doesn’t fill the the with of most mobile phone browsers (like this forum does).  

See screenshot.