CSS help formatting captions for full bleed slideshow

I'm trying to get the captions to look cleaner on this full bleed slideshow gallery. Pictured is a photo of my homepage (top pic) and an inspiration pic of what I would like it to look like. I want the white background to be completely left-aligned on the screen, like the inspiration photo shows. I like the vertical padding how it is, but if possible I want the horizontal padding to adjust with the length of the text as the photos switch. I'm not a coding expert; I've been googling and watching tutorials to get it as it is. Here's the CSS that I'm using for it as of right now. 

/*Homepage gallery caption*/
.gallery-caption p{color: black!important}
.gallery-caption {background-color: rgba(255, 255, 255, .55)} 
.gallery-caption p{font-size:1.4rem!important}
.gallery-caption p{font-family: futura-pt! important}
.gallery-caption {margin-top: -10%}
.gallery-caption.gallery-caption-fullscreen-slideshow {
    top: 104%;
    left: -40%;
    text-align: center;
      max-height: 40px
}
/*Get rid of old caption space*/
.homepage .gallery-fullscreen-slideshow[data-show-captions="true"][data-width="full-bleed"] {
    margin-bottom: 0px !important;
}

Any help or alternate ideas are welcome! I'm using Squarespace 7.1.

What is your site url?

@tuanphan mango-silver-f3xz.squarespace.com

Add to Design > Custom CSS

figcaption.gallery-caption.gallery-caption-fullscreen-slideshow {
    left: 0 !important;
    text-align: left;
    margin-left: 0 !important;
    padding-left: 20px;
    max-width: 400px;
}

Thanks! This worked to get the caption box aligned to the left. Would there be a way to make the caption box width adjust based on the length of the text every time it changes? 

On 6/16/2023 at 3:06 AM, coral-studio said:

Thanks! This worked to get the caption box aligned to the left. Would there be a way to make the caption box width adjust based on the length of the text every time it changes? 

Try this code

body.homepage figcaption.gallery-caption.gallery-caption-fullscreen-slideshow, body.homepage figcaption.gallery-caption.gallery-caption-fullscreen-slideshow * {
    width: auto !important;
    display: inline-block !important;
    position: relative !important;
    top: 90% !important;
}

It looks like the width is adjusting, but the text has disappeared once I added this new code. I think maybe something in one of the other codes I'm using messed up the alignment, but not sure. Do you see what the issue could be? Here are all the codes I'm using to adjust the home page captions:

/*Homepage gallery caption*/
.gallery-caption p{color: black!important}
.gallery-caption {background-color: rgba(255, 255, 255, .55)} 
.gallery-caption p{font-size:1.4rem!important}
.gallery-caption p{font-family: futura-pt! important}
.gallery-caption {margin-top: -10%}
.gallery-caption.gallery-caption-fullscreen-slideshow {
    top: 104%;
    left: -40%;
    text-align: center;
      max-height: 40px
}

/*home caption left align*/
figcaption.gallery-caption.gallery-caption-fullscreen-slideshow {
    left: 0 !important;
    text-align: center;
    margin-left: 0 !important;
    padding-left: 20px;
    max-width: 400px;
}

/*home caption fit width*/
body.homepage figcaption.gallery-caption.gallery-caption-fullscreen-slideshow, body.homepage figcaption.gallery-caption.gallery-caption-fullscreen-slideshow * {
    width: auto !important;
    display: inline-block !important;
    position: relative !important;
    top: 90% !important;
}

/*Get rid of old home caption space*/
.homepage .gallery-fullscreen-slideshow[data-show-captions="true"][data-width="full-bleed"] {
    margin-bottom: 0px !important;
}

Can you disable gallery autoscroll? We can check code easier

Done!

This worked! Thank you, @tuanphan!!