What is causing wrapper to break? - html

Question

I'm not sure if I should post this in wordpress stack but if you go to the single.php
on my custom wordpress theme, you'll see that if you make your browser roughly less than 1200 pixels wide, you are able to horizontally scroll to the right. There should be no extra space to allow the horizontal scroll as the page content is in a wrapper div.
I have viewed the source and it appears that the content generated by wordpress through the_content() is creating divs that break the wrapper?
Here is the code for single.php Once again when I remove <?php the_content(); ?> the structural problem is not there.
<?php get_header(); ?>
<div class="page-section clear">
<!-- post thumbnail -->
<div class="single-image-anchor">
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<a class="single-image" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" style="background-image: url('<?php echo $image[0]; ?>')">
</a>
<?php endif; ?>
</div>
<!-- /post thumbnail -->
<div class="container clear">
<main role="main">
<!-- section -->
<section>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<div class="wrapper">
<!-- article -->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<!-- post title -->
<h1 class="single-title">
<?php the_title(); ?>
</h1>
<!-- /post title -->
<!-- post details -->
<span class="single-date"><?php the_time(get_option('date_format')); ?></span>
<div class="single-text">
<?php the_content(); ?>
<br />
<a href="<?php echo get_permalink(18); ?>" class="back-article">
<i class="fa fa-arrow-circle-left"></i> News
</a/>
</div>
</article>
<!-- /article -->
</div>
<?php endwhile; ?>
<?php else: ?>
<?php endif; ?>
</section>
<!-- /section -->
</main>
</div>
</div>
<?php get_footer(); ?>

Answer 1

it's the facebook share buttons. The span wrapping it and the iframe are currently set to a width of 900px:
<span style="vertical-align: bottom; width: 900px; height: 25px;">
<iframe name="f2a1624528" width="900px" height="1000px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:like Facebook Social Plugin" src="http://www.facebook.com/plugins/like.php?app_id=1526849080927795&channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2F7r8gQb8MIqE.js%3Fversion%3D41%23cb%3Dfa87d2a78%26domain%3Dmichaeljeromeinprogress.themichaelsanger.com%26origin%3Dhttp%253A%252F%252Fmichaeljeromeinprogress.themichaelsanger.com%252Ff291a9dcc8%26relation%3Dparent.parent&href=http%3A%2F%2Fmichaeljeromeinprogress.themichaelsanger.com%2Fnye-bte-shows-on-sale-now%2F&locale=en_US&ref=below-post&sdk=joey&share=true&width=900" style="border: none; visibility: visible; width: 900px; height: 25px;" class=""></iframe>
</span>
set them to like 100px since those buttons are small anyways.

Answer 2

Whenever you get problems like this, do this:
div { border: 1px solid red }
Then look at all the div blocks inside the page. Take note on the one's that are touching the right edge.
If you go into Chrome, you can delete the element node. When I deleted the fb social plugin nodes, the horizontal scroll bar went away. So look into that...