我做的双飞翼布局为什么中间部分设置margin-right无效？

来源：3-8 布局-解题-4

慕妹8003063

2021-05-16

我做的代码如下，但是似乎中间部分的margin-right没生效，我找了半天没找到原因，麻烦老师帮忙看一下，谢谢！

<!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">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            min-width: 600px;
        }
        .main{
            width: 100%;
            height: 50px;
            background-color: aliceblue;
        }
        .inMain{
            width: 100%;
            height: 50px;
            background-color: blueviolet;
            margin-left: 200px;
            margin-right: 200px;
        }
        .float{
            float:left;
        }
        .left{
            background-color: aqua;
            width: 200px;
            height: 50px;
            /* margin-left: -100%; */
        }
        .right{
            background-color: pink;
            width: 200px;
            height: 50px;
            /* margin-left:-200px; */
        }
    </style>
</head>
<body>
    <div class="main float">
        <div class="inMain"></div>
    </div>
    <div class="left float"></div>
    <div class="right float"></div>    
</body>
</html>

图片描述