about中间的区域，我怎样才能随着浏览器大小的变化而变化呢？

我放大或者缩小浏览器以后就不是作业要完成的效果了，我应该怎么修改呢？

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .about-middle {
            overflow: hidden;
            /* text-align: center; */
            width: 60%;
            border: 3px solid green;
            margin: 0 auto;
        }
        
        .about-middle .left {
            width: 20%;
            height: 600px;
            float: left;
            margin: 0 10% auto 0;
            border: 1px solid;
            position: relative;
            z-index: 40;
            border: 3px solid green;
        }
        
        .box {
            margin: 0 auto;
            border: 2px solid blue;
            overflow: hidden;
        }
        
        .about-middle .left .left-top {
            width: 200px;
            font-size: 35px;
            text-align: center;
        }
        
        .about-middle .left .left-bottom {
            position: absolute;
            border: 1px solid #c5c5c5;
            width: 330px;
            background-color: rgba(255, 255, 255, 0.4);
            padding: 25px;
            height: 185px;
        }
        
        .about-middle .left input[type="button"] {
            width: 70px;
            height: 40px;
            background-color: black;
            color: white;
            border: 0;
            margin-top: 30px;
        }
        
        .about-middle .middle {
            float: left;
            /* text-align: center; */
            overflow: hidden;
            margin: 0 auto;
            position: relative;
        }
        
        .about-middle .middle img {
            width: auto;
        }
        
        .about-middle .right {
            float: left;
            width: 10%;
            height: 435px;
            text-align: center;
            margin-left: 30px;
            border: 1px solid;
            position: relative;
        }
        
        .about-middle .right .right-top {
            width: 200px;
            height: 140px;
            border: 1px solid #07cbc9;
            margin-bottom: 40px;
        }
        
        .p1 {
            font-weight: bold;
            font-size: 30px;
            margin-top: 20px;
        }
        
        .about-middle .right .right-bottom {
            width: 200px;
            height: 140px;
            border: 1px solid #07cbc9;
        }
    </style>
</head>

<body>
    <div class="about-middle">
        <div class="box">
            <div class="left">
                <div class="left-top">
                    <p>
                        A WORD ABOUT US
                    </p>
                </div>
                <div class="left-bottom">
                    <p>Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nislet felis gravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet.</p>
                    <input type="button" value="EXPLORE">
                </div>
            </div>
            <div class="middle">
                <img src="images/bb3.jpg" alt="">
            </div>
            <div class="right">
                <div class="right-top">
                    <p class="p1">70000</p>
                    <div class="line"></div>
                    <p class="p2">Students</p>
                </div>
                <div class="right-bottom">
                    <p class="p1">600</p>
                    <div class="line"></div>
                    <p class="p2">Faculty</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

qq_夜阑卧听风吹雨_03543626 2020-05-03

源自：前端油画商城案例 4-3 项目作业