Issues with 'max-content'

Hey all,

Just looking for some help with this. I have a padding on all my sections so that they never touch the edge of the window when resizing. However, the padding doesn’t work on my intro section where I’ve used CSS grid and made one of my grid-template-columns have a value of max-content. How can I fix this? Here’s my code and a screenshot of the issue. Thanks for your help in advance!

^^when I resize the window, it doesn’t shrink to fit and gets cut off :frowning:

@media (min-width: 600px) {
    .intro {
        display: grid;
        width: min-content;
        margin: 0 auto;
        grid-column-gap: 1em;
            "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);

Hey @cbanlawi!
Do you have link to codepen or any other?
It would be helpful

Hey, thanks for the prompt response!

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Thanks, will do for next time!