Make the percentages in line with the background

Viewed 83

The percentages are somehow displaced. They should be in line with the pink background. And they may overlap the pink background. What can I try next?

:root {
  --color-0: #054B71;
  --color-1: #E3519A;
  --color-3: black;
  --color-4: white;
  --color-5: #FAA1CD;
}

.n-yes-no-polls-wrapper {
  border-top: 1px solid var(--color-1);
  border-bottom: 1px solid var(--color-1);
  margin-top: 5rem;
  margin-bottom: 5rem;
  display: block;
}

.n-yes-no-question {
  text-align: center;
  font-weight: bold;
  margin-top: 5rem;
  z-index: 1;
  display: block;
}

.n-yes-no-answer-hover:hover {
  background-color: var(--color-5);
  transition: 1s;
}

.n-yes-no-answer,
.n-yes-no-answer-result {
  display: table-cell;
}

.n-yes-no-answer {
  border: 1px solid var(--color-1) !important;
  text-transform: uppercase;
  cursor: pointer;
  width: 48%;
  vertical-align: middle;
  text-align: center;
}

.n-yes-no-table {
  border-collapse: separate !important;
  align-content: center;
  align-items: center;
  border-spacing: 0.5rem !important;
  display: table;
  justify-content: space-evenly;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  width: 100%;
}

.n-yes-no-answer-result {
  position: relative;
  right: 0;
}

.n-yes-no-percentage {
  font-size: small;
  font-weight: bold;
  background-color: var(--color-3);
  color: var(--color-4);
  vertical-align: middle;
  padding: 1rem;
  line-height: 0.5rem;
  position: absolute;
  right: 0;
}

.n-yes-percentage {
  padding: 5px;
  margin: 5px;
  display: inline-block;
}

.n-no-percentage {
  padding: 5px;
  margin: 5px;
  display: inline-block;
}

.n-yes-no-percentage-background,
.n-answer-diagram-yes,
.n-answer-diagram-no {
  background-color: var(--color-1);
  z-index: -1;
  display: block;
}

.n-answer-text {
  padding-left: 1rem;
  padding-right: 1rem;
}

.n-user-choice::after {
  content: "\00A0\2713";
}

.n-table-row {
  display: table-row;
}


/* ----------------------------------------------
     * Generated by Animista on 2021-10-31 20:29:45
     * Licensed under FreeBSD License.
     * See http://animista.net/license for more info. 
     * w: http://animista.net, t: @cssanimista
     * ---------------------------------------------- */


/**
     * ----------------------------------------
     * animation scale-up-hor-left
     * ----------------------------------------
     */

.scale-up-hor-left {
  -webkit-animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes scale-up-hor-left {
  0% {
    -webkit-transform: scaleX(0.4);
    transform: scaleX(0.4);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
}

@keyframes scale-up-hor-left {
  0% {
    -webkit-transform: scaleX(0.4);
    transform: scaleX(0.4);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
}
<figure class=" lazyloaded" data-link="http://galina/wp-content/themes/nonverbis_journalx/static/css/yes-no-1.css" data-script="http://galina/wp-content/themes/nonverbis_journalx/static/js/yes-no-1.js">
  <span class="n-yes-no-polls-wrapper">
                            <span class="n-yes-no-question">Do you use Instagram?</span>
  <span class="n-yes-no-table">                                                         
                                    <span class="n-table-row">
                                        <span class="n-yes-no-answer-result n-yes-answer-result">
                                            <span style="width: 89%;" class="n-yes-no-percentage-background n-hidden">&nbsp;</span>
  <span class="n-yes-no-percentage n-yes-percentage n-hidden">91&nbsp;%</span>
  </span>
  <span class="n-yes-no-answer-result n-no-answer-result">                                            
                                            <span style="width: 7%;" class="n-yes-no-percentage-background n-hidden">&nbsp;</span>
  <span class="n-yes-no-percentage n-no-percentage n-hidden">9&nbsp;%</span>
  </span>
  </span>

  <span class="n-table-row">
                                        <span class="n-yes-no-answer n-yes-no-answer-hover n-yes-answer">
                                            <span class="n-answer-text">Sure</span>
  </span>
  <span class="n-yes-no-answer n-yes-no-answer-hover n-no-answer">
                                            <span class="n-answer-text">No...</span>
  </span>
  </span>

  </span>
  </span>
  <!-- .n-yes-no-polls-wrapper -->
</figure>

1 Answers

Remove the margin, and specify the absolute positioning of those percentages, top: 0;.

:root {
  --color-0: #054B71;
  --color-1: #E3519A;
  --color-3: black;
  --color-4: white;
  --color-5: #FAA1CD;
}

.n-yes-no-polls-wrapper {
  border-top: 1px solid var(--color-1);
  border-bottom: 1px solid var(--color-1);
  margin-top: 5rem;
  margin-bottom: 5rem;
  display: block;
}

.n-yes-no-question {
  text-align: center;
  font-weight: bold;
  margin-top: 5rem;
  z-index: 1;
  display: block;
}

.n-yes-no-answer-hover:hover {
  background-color: var(--color-5);
  transition: 1s;
}

.n-yes-no-answer,
.n-yes-no-answer-result {
  display: table-cell;
}

.n-yes-no-answer {
  border: 1px solid var(--color-1) !important;
  text-transform: uppercase;
  cursor: pointer;
  width: 48%;
  vertical-align: middle;
  text-align: center;
}

.n-yes-no-table {
  border-collapse: separate !important;
  align-content: center;
  align-items: center;
  border-spacing: 0.5rem !important;
  display: table;
  justify-content: space-evenly;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  width: 100%;
}

.n-yes-no-answer-result {
  position: relative;
  right: 0;
}

.n-yes-no-percentage {
  font-size: small;
  font-weight: bold;
  background-color: var(--color-3);
  color: var(--color-4);
  vertical-align: middle;
  padding: 1rem;
  line-height: 1.2;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.n-yes-percentage,
.n-no-percentage {
  padding: 0 5px;
  margin: 0px;
}

.n-yes-no-percentage-background,
.n-answer-diagram-yes,
.n-answer-diagram-no {
  background-color: var(--color-1);
  z-index: -1;
  display: block;
}

.n-answer-text {
  padding-left: 1rem;
  padding-right: 1rem;
}

.n-user-choice::after {
  content: "\00A0\2713";
}

.n-table-row {
  display: table-row;
}


/* ----------------------------------------------
     * Generated by Animista on 2021-10-31 20:29:45
     * Licensed under FreeBSD License.
     * See http://animista.net/license for more info. 
     * w: http://animista.net, t: @cssanimista
     * ---------------------------------------------- */


/**
     * ----------------------------------------
     * animation scale-up-hor-left
     * ----------------------------------------
     */

.scale-up-hor-left {
  -webkit-animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes scale-up-hor-left {
  0% {
    -webkit-transform: scaleX(0.4);
    transform: scaleX(0.4);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
}

@keyframes scale-up-hor-left {
  0% {
    -webkit-transform: scaleX(0.4);
    transform: scaleX(0.4);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
}
<figure class=" lazyloaded" data-link="http://galina/wp-content/themes/nonverbis_journalx/static/css/yes-no-1.css" data-script="http://galina/wp-content/themes/nonverbis_journalx/static/js/yes-no-1.js">
  <span class="n-yes-no-polls-wrapper">
                            <span class="n-yes-no-question">Do you use Instagram?</span>
  <span class="n-yes-no-table">                                                         
                                    <span class="n-table-row">
                                        <span class="n-yes-no-answer-result n-yes-answer-result">
                                            <span style="width: 89%;" class="n-yes-no-percentage-background n-hidden">&nbsp;</span>
  <span class="n-yes-no-percentage n-yes-percentage n-hidden">91&nbsp;%</span>
  </span>
  <span class="n-yes-no-answer-result n-no-answer-result">                                            
                                            <span style="width: 7%;" class="n-yes-no-percentage-background n-hidden">&nbsp;</span>
  <span class="n-yes-no-percentage n-no-percentage n-hidden">9&nbsp;%</span>
  </span>
  </span>

  <span class="n-table-row">
                                        <span class="n-yes-no-answer n-yes-no-answer-hover n-yes-answer">
                                            <span class="n-answer-text">Sure</span>
  </span>
  <span class="n-yes-no-answer n-yes-no-answer-hover n-no-answer">
                                            <span class="n-answer-text">No...</span>
  </span>
  </span>

  </span>
  </span>
  <!-- .n-yes-no-polls-wrapper -->
</figure>

Related