只是寻求与此有关的帮助。我在所有部分上都有一个填充，以便在调整大小时它们永远不会碰到窗口的边缘。但是，对于我使用CSS网格并使我的grid-template-columns的max-content值无效的介绍部分，填充不起作用。我怎样才能解决这个问题？这是我的代码，以及在Codepen上的链接。在此先感谢你的帮助！

的HTML

<section class="intro" id="home">
    <h1 class="section__title section__title--intro">
        Hi, I am <strong>Christine Banlawi</strong>
    </h1>
    <p class="section__subtitle section__subtitle--intro">web developer</p>
    <img src="images/cb-01.jpg" alt="" class="intro__img">
</section>

的CSS

.intro {
    position: relative;
}

.intro__img {
    box-shadow: var(--bs);
}

@media (min-width: 600px) {
    .intro {
        display: grid;
        width: min-content;
        margin: 0 auto;
        grid-column-gap: 1em;
        grid-template-areas: 
            "img title"
            "img subtitle";
        grid-template-columns: min-content max-content;
    }
    
    .intro__img {
        grid-area: img;
        min-width: 300px;
        position: relative;
        z-index: 2;
    }    
    
    .section__subtitle--intro {
        align-self: start;
        grid-column: -1 / 1;
        grid-row: 2;
        text-align: right;
        position: relative;
        left: -1.5em;
        width: calc(100% + 3em);
    }
}

https://codepen.io/cbanlawi/pen/oNzNEOy