Как разместить красный круг в правом верхнем углу центрированного div?

У меня есть небольшая проблема css, и я не знаю, возможно ли это сделать в css, но я принимаю любое другое решение.
Вот пример того, чего я пытаюсь достичь.

Я пытаюсь добавить красные круги в правом верхнем углу разделов.
Мой код sofar:

HTML

<div class="w3-container customheight">
  <div class="center buttons">
    <a class="todo roundbutton">
      <div class="redicon"></div>
      <div class="redicontext">
        <span class="todotext">1</span>
      </div>
    </a>
    <a class="decision roundbutton">
      <div class="redicontext">
        <span class="decisiontext">2</span>
      </div>
    </a>
    <a class="remark roundbutton">
      <div class="redicontext"></div>
        <span class="remarktext">3</span>
      </div>
    </a>
  </div>
</div>

стиль CSS

.center{
  margin: 0 auto;
}
.roundbutton{
  width: calc(33.333% - 20px);
  height: 100%;
  margin: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
  display:block;
  background-size: contain;
  float:left;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
}

.todo{
  background-image: url("../img/todo.jpg"); 
}

.decision{
  background-image: url("../img/decision.jpg"); 
}

.remark{
  background-image: url("../img/remark.jpg"); 
}   

.redicon{
  position: absolute;
  top: 10px;
  left: 3%;
  background: red;
  padding:10px;
  box-sizing: border-box;
  border-radius: 100%;

}

.redicontext{
  position: absolute;
  top: 10px;
  right: 3%;
  padding:10px;
  box-sizing: border-box;
  border-radius: 100%;
}

Я уже пробовал несколько вещей:
— создание другого div за первым, чтобы использовать прокладку на этом div без создания овале
— абсолютные значения для красных кругов, это может использоваться с определенной высотой и шириной, но он должен работать отзывчивым.

Я не настолько хорош в css, но я знаю основы.
Любая помощь в этом действительно хорошая!

Привет!