How do I make the container of this resume I created using html and css response in a way that if I make the browser smaller, it will follow?

@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@400;500;600;700;800;900&display=swap');
    

body
{
    background: #f0966b;
    font-family: 'Catamaran', sans-serif;
    margin: 30px 250px;
    


}

.name
{
    font-size: 35px;
    font-weight: 800;
}

.container 
{
    
    display: grid;
    padding: 30px;
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    background-color: #f8f8f8;
    max-width: 100%;
    min-height: 100px;
    
}

.header
{min-height: 100px;
    display: grid;
    grid-template-columns: 70% 30%;



}



.subheader
{
    font-size: 19px;
    font-weight: 700;
}
    


.left-right
{
    display: grid;
    grid-template-columns: 50% 50%;
    margin-top: 25px;
}

.footer
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 1px;
    grid-column-gap: 2em;

}

span
{
    font-weight: 600;
}

<!DOCTYPE html>
<html>
<head>
    <title>Sample</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

     <link rel="stylesheet" type="text/css" href="./sample.css">

     <link href="https://fonts.googleapis.com/css2?family=Catamaran:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body>

    <div class="container">
        <div class="header">

            <p class="name">
                Hello. <br> 
                I'm <span style="color: #e9692c; ">
                    Name Surname.
                </span>
            </p>

            <img src="https://i.pinimg.com/1200x/ec/de/63/ecde631ccc34c9b8086dbf7956f88eae.jpg" width="200" height="auto">
        </div>

        
            <div>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. 
            </div>
        

        <div class="left-right">

            <div>

            <div class="subheader">
                Skills 
                <div>━</div>
            </div>
            <div>
                 ● Graphic Design<br>
                 ● Web Design<br>
                 ● Web Development<br>
                 ● Adobe Illustrator<br>
                 ● Adobe Photoshop<br></div>
            
            </div>

            <div>

            <div class="subheader">
            <div class="exp">   
                Experience
                <div>━</div>
            </div></div>
            <div>
                <strong>2xxx-PRESENT</strong> <br>
                <span style="color: #e9692c;">POSITION</span><br>
                <span>COMPANY INC.</span>
                <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.</div>
            </div>
            

            </div>

            <div><br>

            <div class="subheader">
                Education
                <div>━</div>
            </div>

            <div>2xxx-2xxx | M.A <br>
                <span style="color: #e9692c;">FRONT-END <br></span>
            University</div><br>

            <div>2xxx-2xxx | B.S <br>
                <span style="color: #e9692c;">INFORMATION TECHNOLOGY <br></span>
            University</div>


        </div>


        <div>

            <div class="subheader"><br>
                Works
                <div>━</div>
            </div>

            <div>
                <a href = "">Sprite Animation using HTML & CSS</a><br>
                <a href="">Blog Site</a>
            </div>
            
        </div>

        <div><br>

            <div class="subheader">
                Hobbies & Interests 
                <div>━</div>
            </div>
            <div>
                Web Design <br>
                Digital Illustration <br>
                Animation <br>
                Video Editing <br>
                Programming <br>
            </div>

        </div>


        </div>

        <div><hr></div>
        <div class="footer">

            <div>email</div>
            <div>contact no.</div>
            <div>linkedin</div>
        </div>




    

</body>
</html>

</body>
</html>