.q-mark-container {
  /* visual frame */
  background-color: #d6c7a3;
  border: inset 3px #c3b797;
  border-radius: 50px;

  /* size / spacing */
  width: 15px;
  height: 23px;
  margin: 0 4px;
  padding: 0;                /* padding will offset centering—set to 0
                                or use smaller values if you want extra space */

  /* center the <span> both ways */
  display: inline-flex;      /* like inline-block, but flex-enabled       */
  justify-content: center;   /* horizontal centering inside the container */
  align-items: center;       /* vertical   centering                      */

  /* optional typography */
  font-weight: 700;
  text-align: center;
}

/* optional: if you ever need just one of them shifted,
   give that span its own class and style that instead */