CSS Content goes off the screen - html

Question

I am trying to center the content but my content is going on the right side and goes off the screen
Here is my code:
<?php
/* Template Name: About Us
*/
$aboutheading = get_field('about_heading');
$aboutus = get_field('about_us');
get_header(); ?>
<section>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2> <?php echo "$aboutheading"; ?></h2>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-6">
<p class="lead"><?php echo "$aboutus"; ?></p>
</div>
</div>
</div>
</section>
<?php get_footer(); ?>
Here is the live link:http://www.abiglittlebiz.com/trevelle/about-us/
what I'm trying to achieve that the div becomes responsive

Answer 1

You have in your $aboutus Non-Breaking Space
In this case, text can't be break and go to new line. Clear Non-Breaking Spaces from your content or try this:
<p class="lead"><?php echo str_replace(' ', ' ', $aboutus); ?></p>

Answer 2

As others have pointed out in the comments. The issue is not CSS. The issue is the content. All spaces have been replaced by in your content, which is keeping the browser from breaking lines.
Just to verify this you can add the rule word-break: break-word; to your div and notice that the lines will be forced to break mid-word and stay inside your div.

Answer 3

You need to use offset class.
<section>
<div class="container">
<div class="row">
<div class="col-md-offset-4 col-md-4">
<h2> <?php echo "$aboutheading"; ?></h2>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-offset-4 col-md-offset-3 col-sm-4 col-md-6">
<p class="lead"><?php echo "$aboutus"; ?></p>
</div>
</div>
</div>
</section>