title: cut off about 20px on both side - mobile website
body: <p><a href="http://juniorgoldreport.com/" rel="nofollow noreferrer">http://juniorgoldreport.com/</a> is the website I'm working on. It's made in wordpress. I'm making it mobile friendly by doing all my changes with </p>
  
  <pre><code>@media only screen and (max-device-width: 480px) {
  </code></pre>
  
  <p>I'm viewing all my changes via chromes inspect element on a desktop, and then using the mobile view.</p>
  
  <p>When you take a look at the website, there's extra space on the right and left, maybe like 20/30px's. I'd want to cut that extra space out so it more zoomed in, that the articles are taking up the whole screen (maybe 2px away from both sides of the screen). </p>
  
  <p>I'm not sure what I need to change to make this happen. I've been screwing around with so many elements but I can't find one that does any sort of direct change to website's sizing. </p>
  
  <p>example images:</p>
  
  <p>This is how it is now
  <a href="https://i.stack.imgur.com/UJENU.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UJENU.jpg" alt="current mobile website"></a></p>
  
  <p>this is what I'm trying to do:</p>
  
  <p><a href="https://i.stack.imgur.com/ZNoaT.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZNoaT.jpg" alt="enter image description here"></a></p>