Padding inside a div-CodePudding

I am new to HTML and CSS and have created a birthday card which I want to have a 50/50 split down the centre . I have inserted my image on the left however when I add text to the right and side it is too close to the centre line, so I have used some padding (padding-left: 50px;) to move it further across. The issue is when I do this the box on the right increases. I want the box on the right to remain the same size but just be able to adjust the text inside that box without it resizing.

.card {
    box-sizing: border-box;
    width: 600px;
    height: 400px;    
    border: 5px solid;
    display: flex;

}


.left {
    flex: 1;   
    background-image: url("https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/golden-retriever-royalty-free-image-506756303-1560962726.jpg");
    border-style: solid;
    background-size: cover;
    background-position: 60% 5%;
    width: auto;
    height: auto;
    max-width: 300px;
    max-height: 600px;
}


.right {
    
    flex: 1;    
    background-color: burlywood;
    border: 5px solid;
    padding-left: 50px;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Flex</title>
</head>
    <body>
        
            <div >
            <div >

            </div>
                <div >
                    <h1 >Hello</h1>
                    <h2 >Happy Birthday</h2>
                    <p >We really miss you and are thinking about you</p>
                    <p > Lots of love and see you soon x</p>
                </div>
            </div>

    </body>
</html>

CodePudding user response：

Try this

 .card {
    box-sizing: border-box;
    width: 600px;
    height: 400px;    
    border: 5px solid;
    display: flex;
}


.left {
    background-image: url("https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/golden-retriever-royalty-free-image-506756303-1560962726.jpg");
    border-style: solid;
    background-size: cover;
    background-position: 60% 5%;
    width: 50%;
    height: auto;
    max-width: 300px;
    max-height: 600px;
}


.right {
    width: 50%;
    background-color: burlywood;
    border: 5px solid;
    padding: 0 25px;
    box-sizing: border-box;
}