关于圣杯布局中负边距问题

前端小白，最近刚学习圣杯布局，对于圣杯布局中出现的负边距问题有所疑问，希望大佬讲解一下。

DOM结构：

 <div class="parent">
      <div class="center float">Center</div>
      <div class="left float">Left</div>
      <div class="right float ">Right</div>
  </div>  
复制代码

CSS代码：

<style>
    .parent{
        background: rgb(185, 178, 178); 
        padding: 10px 100px 10px 200px; 
        border: 2px solid rgb(26, 131, 73);  
        }
    .float{
        float: left;
        text-align: center;
        color: whitesmoke;
    }
    .parent::after{
        content: '';
        display: block;
        clear: both;
    }
    .center{
         background: rgb(59, 71, 90);
         height: 200px;
         width: 100%;
        }
    .left{
        width: 200px;
        height: 200px;
        background: tomato;
        margin-left: -100%;
        position: relative;
        right: 200px;
        
    }
    .right{
        width: 100px;
        height: 200px;
        background: turquoise;
        margin-right: -100px;
    }

</style>
复制代码

布局结果如下图所示：

关于上述代码中的负边距理解对于

 }
    .right{
        width: 100px;
        height: 200px;
        background: turquoise;
        margin-right: -100px;
    }
复制代码

对于该段代码中的margin-right: -100px;，刚开始写代码过程中，考虑将其写成margin-left: -100px;，但是这样的结果导致Right块的右侧和Center块右侧对齐，并不能占据右侧的空白padding部分

想请教大佬对于这部分代码中的margin-right: -100px;解读，其为何能够占据右侧的空白padding？