html - 添加 margin-left 创建水平滚动条到空白

Question

我正在为我的网站编写 CSS。我有一些文字要放在我的背景图片之上。我的 HTML 和 CSS 如下:

HTML

<header class="site-header">


        <div class="site-header__menu-icon">
            <div class="site-header__menu-icon__middle"></div>
        </div>

        <div class="site-header__menu-content">
            <div class="site-header__btn-container">
                <a href="#" class="btn open-modal">Request A Demo</a>
            </div>
            <nav class="primary-nav primary-nav--pull-right">
                <ul>
                    <li><a href="#our-beginning" id="our-beginning-link">Home</a></li>

                    <li><a href="#testimonials" id="testimonials-link">Services</a></li>
                    <li><a href="#testimonials" id="testimonials-link">Why Us</a></li>
                </ul>
            </nav>
        </div>
    </div>
</header>


    <div class="section">
        <picture>
            <img src="assets\images\pepper.jpg">
        </picture>
        <div>
            <div class="section__text-content">
                <h1 class="section__title">Company</h1>
                <h3 class="section__sub-title">Company Slogan</h3>
                <div class="btn-container">
                    <a class="btn" href="#">Talk To A Specialist</a>
                    <a class ="btn btn__white btn__pepper-white" href="#">Get A Quote</a>
                </div>
            </div>
        </div>

    </div>

CSS

.section {
    position: relative; 
    max-width: 100%;

    &__text-content {
        position: absolute;
        top: 30%;
        width: 100%;
        margin-left:
    }

    &__title {
        font-size: 7rem;
        font-weight: 300;
        color: #ffffff;
        margin-bottom: 0;
    }

    &__sub-title {
        font-size: 2.5rem;
        font-weight: 300;
        margin-top: 3%;
        margin-bottom: 2%;
        color: #ffffff;
    }
}

当我尝试在我的 CSS 中的 .section 类中添加一个 margin-left 时，问题就出现了，因为然后屏幕右侧的空白出现了一个水平滚动条与我指定的向左移动的边距量成正比。

我知道我可以为我的 css 使用一个简单的“背景图像”，但我更愿意以这种方式来实现响应式成像(这就是我学会的方式，而且我有点时间紧迫)。

有什么建议吗？

Answer 1

固定

我的问题是我通过以下方式以相对的方式写下边距:

.section__text-content {
position: absolute;
margin-left: 10%
}

这是错误的，因为 &__text-content 设置为 position: absolute

百分比是相对位置，对于绝对定位的图像，您需要绝对边距(即像素)