如何使对角div响应？

问题描述

我有一个定价表，其中包含一个对角徽章，如下图所示。定价表是响应式的，徽章也是如此。但是，当我缩小定价表时，徽章的右侧与父div“分离”（请参见下图）。我关注了this code，但我无法说出我的缺失。

.card-premium-category {
  background: blue;
  border-radius: 100%;
  border: 4px solid white;
  width: 85px;
  height: 85px;
  text-align: center;
  position: absolute;
  margin: auto;
  top: -9%;
  right: 0;
  left: 0;
}

.card-premium-header {
  height: 128px;
  border-radius: 4px 4px 0px 0px;
  width: 100%;
  margin: 0 auto;
}

.background-gradient-with-frog {
  background: red;
  background-size: 54% auto,cover;
  background-position: 115% 23%;
}

.box {
  position: relative;
  max-width: 600px;
  width: 90%;
  background: #fff;
  box-shadow: 0 0 15px rgba(0,.1);
}

.ribbon {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute;
}

.ribbon span {
  position: absolute;
  display: block;
  width: 268px;
  padding: 4px 0;
  background-color: white;
  color: #495057;
  font-size: 0.8em;
  text-align: center;
  font-weight: 400;
}

.ribbon-top-right {
  top: 0;
  right: -31px;
}

.ribbon-top-right span {
  left: -25px;
  top: 30px;
  transform: rotate(45deg);
}

<div class="d-flex flex-row justify-content-around text-center">
  <div class="premium-cards-wrapper col-12 mt-4">

    <!-- PRICING TABLE -->
    <div class="card-premium-container col-11 col-xs-11 col-sm-11 col-md-3 
             col-lg-3 mx-auto text-center space-right-left recommended">
      <div class="card-premium-category">
        <img src="#" class="super-reebit">
      </div>
      <div class="card-premium-body">
        <div class="box">
          <div class="ribbon ribbon-top-right"><span>Recomendado</span>
          </div>
        </div>
        <div class="card-premium-header background-gradient-with-frog">
        </div>
      </div>
    </div>
    <!-- /PRICING TABLE -->
  </div>
</div>

这是我的codepen。

这是我需要实现的：

这是我的问题：

解决方法

您是否将.box宽度设置为90％的任何特殊原因？我将您的Codepen中的.box宽度更改为100％，看起来还可以。