即使文本是响应性的，也会在流边上显示文本

Question

我已经使我的文本响应，它可以在大多数页面上工作，但在我的主页上，当窗口调整大小时，它会溢出边缘。

​

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

对于body set overflow:hidden；css: body{ overflow:hidden}

Answer 2

从以下位置删除宽度：

• headerwrap h9

• 和来自h12

通过添加那些不需要的宽度(120%和1200px)，您将离开内容区域，从而获得水平滚动。

这是你创建的RWD网站吗？那就请你读这个：

• https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/

充分理解RWD (响应式Web设计)

Answer 3

在响应式设计中，不要使用固定的Width值。

我发现你在使用#headerwrap h9 {width: 1200px;}，这会使你的网站没有响应能力

尝试使用% Value #headerwrap h9 {width: 100%;}