Flexbox Div inside a container div

I'm having some issues with a small challenge i'm working on. I have a container
div
with two seperate
div
inside that I have side by side using flexbox.
One div holds the an image and the second div holds content but for some reason I cant get the content div background to completely cover the entire div.

I dont have any height set on the main container
.main-container{
    display: flex;
    justify-content: space-around;
    background: rgb(236, 222, 222); 
    height: auto;
    padding: 20px;
}


This is what I have for my image container so far.
.img-container{
    width: 350px;
    /* height: min-content; */
    /* padding: 20px; */
}


This is my content container.
.content-container {
    width: 350px;
    padding-left: 20px;
    background-color: white;
    height: min-content;
}

I'm trying to add a white background to that entire half but for some reason the color stops where the button is located.

Any ideas to help me progress with this challenge. Thanks in advance.
Was this page helpful?