如何将图片等内容移出1160px宽度的主内容区域？

针对你遇到的「大部分内容在1160px居中容器内，部分元素需要超出容器」的问题，以下是两种实用的解决方法：

方法一：相对定位偏移（适合小幅度超出） #

通过给需要超出的元素设置相对定位，利用left/right属性偏移元素位置，突破父容器的宽度限制。

修改后的CSS代码：

.big__title {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    display: flex; /* 补充flex实现横向布局，可根据需求调整 */
    flex-wrap: wrap;
    /* 保留原有文字、按钮样式 */
    h1 {
        color: #FFF;
        font-size: 70px;
        font-style: normal;
        font-weight: 600;
        line-height: 160%;
    }
    p {
        color: #FFF;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;
    }
    a {
        color:#FFF;
        text-align: center;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;
        display: inline-block;
        border-radius: 5px;
        background: #D52027;
        padding: 25px 54px;
    }
}

.woman {
    position: relative;
    right: -80px; /* 根据设计需求调整偏移量，负数表示向右超出 */
    img {
        width: 515px;
    }
}

.header__other h1 {
    text-transform: uppercase;
}

原理 #

相对定位的元素会相对于自身原有位置偏移，且不会脱离标准流，父容器默认overflow: visible，因此偏移后的元素可以突破父容器的宽度限制。

方法二：拆分容器结构（适合大幅度超出） #

将固定宽度的居中容器与需要超出的元素分离，用外层容器控制居中范围，超出元素通过绝对定位放置在容器外部。

调整后的HTML结构 #

<div class="big__title-wrapper">
    <!-- 原有1160px范围内的内容 -->
    <div class="big__title-content">
        <div class="header__other">
            <h1>robo school</h1>
            <p>Курсы повышения квалификации по робототехнике для педагогов начальной школы</p>
            <a href="" class="sign__btn">Записаться на курс</a>
        </div>
    </div>
    <!-- 需要超出的图片元素 -->
    <div class="woman">
        <img src="https://s3-alpha-sig.figma.com/img/75b1/c000/25b83366e2fa5d28f23b6174a9411adb?Expires=1698624000&Signature=YR02fL1dMyRubJQJK00FqUeNd2nKF5kZBNT60hfMCeoVm-g8IvepPEqn4PlEcmvVuGyzg04DnNr5i-t~W~Pt32~W2EnsGFWxPRXJ1BXR6ekuqeNu3qNHyxt3JKk7Tkfo5btrn7DRZAGb-Zh4B5hDulL0y68DIhv1o--jmQ46OGfriWftoZ63dTRL63M~~3Y49lr~AiOBApUaV5bkB~he9DsdHn-7IybDO5hvzpP2SzPv91Uo3WNcjZnJfuI8KH-4yNQj8knqyhfiUAthAbbLkAI-8VWrvb7vJroGBMuM0DuPHhYU-9xbGmajwOJz-gPJjmZkPQDg-POI9EIolpo0eg__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4" alt="">
    </div>
</div>

对应的CSS代码 #

.big__title-wrapper {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    position: relative; /* 作为绝对定位元素的参考容器 */
}

.big__title-content {
    /* 复用原有.big__title内的文字、按钮样式 */
    h1 {
        color: #FFF;
        font-size: 70px;
        font-style: normal;
        font-weight: 600;
        line-height: 160%;
        text-transform: uppercase;
    }
    p {
        color: #FFF;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;
    }
    a {
        color:#FFF;
        text-align: center;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;
        display: inline-block;
        border-radius: 5px;
        background: #D52027;
        padding: 25px 54px;
    }
}

.woman {
    position: absolute;
    right: -80px; /* 向右超出外层容器 */
    top: 0; /* 垂直对齐，根据需求调整 */
    img {
        width: 515px;
    }
}

原理 #

外层容器负责居中并提供定位参考，需要超出的元素通过绝对定位脱离标准流，直接相对于外层容器定位，完全不受1160px宽度的限制。

为什么负margin没生效？ #

你的父容器.big__title设置了max-width:1160px且margin:0 auto居中，子元素的负margin只能在父容器的宽度范围内调整位置，无法突破父容器的左右边界（父容器本身的宽度是固定的，子元素的偏移不会改变父容器的位置或宽度）。

内容的提问来源于stack exchange，提问作者Mr Cat