text over flowing edge even when it is responsive - html

Question

I have made my text responsive and it is working in most pages but on my homepage it overflows the edge when the window is resized.
h12 {
width: 120%;
display: block;
padding-top: 40px;
padding-bottom: 30px;
padding-left: 15%;
padding-right: 5%;
font-weight: 700;
color: #ffffff;
text-align: center;
font-size: 20px;
color: #a7ad8d;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
position: relative;
overflow: auto;
}
h9 {
display:block;
text-align: left;
font-family: a;
color: #ffffff;
font-size: 14px;
margin-top: 20px;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}
#headerwrap {
background: url(../img/back.jpg) no-repeat center top;
margin-top: -70px;
padding-top: 250px;
text-align: left;
background-attachment: relative;
background-position: center center;
min-height: 650px;
min-width: 200px;
width: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#headerwrap h9 {
padding-left: 5%;
padding-right: 84%;
width: 1200px;
text-align: left;
padding-top: 5px;
font-weight: 400;
color: #ffffff;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
float: none;
margin-left: auto;
margin-right: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="headerwrap">
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-2">
<h12>WE ALIGN PROFESSIONAL FIRMS TO ACHIEVE THEIR GREATEST VALUE</h12>
<h9> Worthmore provides the focus, structure, accountability and support so leaders can take their firm to continuous improvement and growth.</h9>
<h9> Our leadership and experience in Accounting & Financial Services, and in significant senior corporate roles, provides a breadth of knowledge that can be applied to a multitude of business environments and situations.
We add value by asking the questions that need to be asked, and providing insights and input into the decision-making process.</h9>
</div>
</div>
</div>
</div>

Answer 1

for body set overflow:hidden; css: body{ overflow:hidden}

Answer 2

Remove width from following:
headerwrap h9
And from h12
By adding those unwanted width (120% and 1200px) you are going out of content area and hence getting horizontal scroll.
Is this RWD website you creating? then please read this:
https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/
to fully understand RWD (Responsive Web Design)

Answer 3

In responsive design, do not using fixed Width value.
i found you using
#headerwrap h9 {width: 1200px;} this will make your website not responsive
try usng % Value #headerwrap h9 {width: 100%;}