Been using bootstrap to try and have this section of my web page to display the images properly while shrinking the web page. They stay in line which is good, seems the col / row method with bootstrap really came thru; how can I get these to shrink with the page so that they may stay in formation longer, and look better overall when the web page has shrunk significantly?

the styles

```
h1 {
    font-weight: bold;
    font-size: 40px;
    background-color: #4aaaa5;
    padding: 15px;
    color: #ffffff !important;
}
h2 {
    font-size: 25px;
    Color: #4aaaa5;
    padding: 20px 20px 5px 20px;
}
#foot {
    border-style: solid;
    border-width: 10px 0px 0px 0px;
    border-color: #4aaaa5;
    padding-top: 20px;
    color: #cccccc;
    background-color: #666666;
    text-align: center;
    margin-top: auto;
}
.left {
    display: inline-block;
    position: relative;
    padding: 0px;
    margin: 20px;
}
h3{
    position: absolute;
    bottom: 5px;
    font-size: 25px;
    background-color: #4aaaa5;
    padding: 15px 0px;
    width: 100%;
    color: #ffffff;
    text-align: center;
}
body {
    background-image: url("./hotel-wallpaper/hotel-wallpaper.png");
    display: flex;
    height: 100vh;
    flex-direction: column;
}
.main{
    display: block;
    margin-top: 50px;
    margin-bottom: 150px;
    padding: 20px 20px 40px 20px;
    background-color: #ffffff;
} 
.borderr {
    border-right: 2px solid #cccccc;
}
hr {
    margin: 20px 0px 20px 0;
    height: 1px;
    border: 0px;
    border-top: 3px solid #cccccc;
}
p {
    margin-top: 20px;
    line-height: 30px;
}

```

the html 

```
<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" type="text/css" href="./assets/reset.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="./assets/Style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <title>Document</title>
</head>

<body>
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container col-xl-7 col-lg-8 col-md-9 col-sm-10">
                <h1 class="navbar-brand"> My Name </h1>
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item borderr">
                            <a class="nav-link" href="./index.html"> About me <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item active borderr">
                            <a class="nav-link" href="./portfolio.html">Portfolio</a>
                        </li>
                        <li class="nav-nav-link">
                            <a class="nav-link" href="./contact.html">
                                Contact
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <main>
        <div class="main container col-xl-7 col-lg-8 col-md-9 col-sm-10">
            <h2> Portfolio </h2>
            <hr>
            <div class="row">
                <div class="left">
                    <img src="https://www.peta.org/wp-content/uploads/2017/05/Kenny-4-602x399.jpg" alt="White Liger" width="100%" height="100%"
                        style="max-width: 300px; max-height: 200px;">
                    <h3> liger </h3>
                </div>
                <div class="left">
                    <img src="https://twistedsifter.files.wordpress.com/2012/01/savannah_cat_closeup.jpg?w=800&h=507&zoom=2"
                        alt="Savannah" width="100%" height="100%" style="max-width: 300px; max-height: 200px;">
                    <h3>Savannah</h3>
                </div>
                <div class="left">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/XJ-B1_Beefalo.jpg/1920px-XJ-B1_Beefalo.jpg"
                        alt="Beefalo" width="100%" height="100%" style="max-width: 300px; max-height: 200px;">
                    <h3> Beefalo </h3>
                </div>
                <div class="left">
                    <div class="pic">
                        <img src="https://shoeuntied.files.wordpress.com/2017/12/rama2.jpg" alt="Cama" width="100%" height="100%" style="max-width: 300px; max-height: 200px;">
                        <h3>Lama camel</h3>
                    </div>
                </div>
                <div class="left">
                    <img src="https://i0.wp.com/metro.co.uk/wp-content/uploads/2018/11/sei_38307333-0b17.jpg?quality=90&strip=all&zoom=1&resize=644%2C471&ssl=1"
                        alt="Zonkey" width="100%" height="100%" style="max-width: 300px; max-height: 200px;">
                    <h3> Zonkey</h3>
                </div>

            </div>
        </div>
    </main>
    <footer id="foot">

        Copyright &copy;

    </footer>

</body>

</html>

```

Thanks -