For those of you who have struggled using the Disqus WP Plugin, this guide is for you. I tried using the plugin, but no matter which stylesheets I edited, I couldn't edit the Disqus CSS since the stylesheets are located within an iframe tag. Anyways here's what I did to fix that annoying box/margin error.

Using this guide, I added this JavaScript code to the end of my functions.php file.

function disqus_embed($disqus_shortname) {
    global $post;
    wp_enqueue_script('disqus_embed','http://'.$disqus_shortname.'.disqus.com/embed.js');
    echo '<div id="disqus_thread"></div>
    <script type="text/javascript">
        var disqus_shortname = "'.$disqus_shortname.'";
        var disqus_title = "'.$post->post_title.'";
        var disqus_url = "'.get_permalink($post->ID).'";
        var disqus_identifier = "'.$disqus_shortname.'-'.$post->ID.'";
    </script>';
}

Next, I replaced comments_template(); in my single.php and page.php files with this code:

//comments_template();
echo '<div class="disqus-div">';
disqus_embed('YY');
echo '</div>';

Replace YY with your Disqus short name (typically http://shortname.disqus.com). Finally, I added this CSS to my custom.css file. Replace XX with the margins of your liking.

.disqus-div {
  margin-top: XXpx;
  margin-right: XXpx;
  margin-left: XXpx;
}

You can also add any other CSS you want to this class. Cheers, hope this helps someone.