Are there special style rules for Retina?

Question

css

Hello
, I have a block that looks adequate in both Mozilla and Chrome on a FullHD screen. When I look at it on a poppy with Retina, then some kind of indentation appears on the right. Why?
The code:

.info {
      //background: url("../img/contcts.png") no-repeat scroll;
      width: 24.2%;
      display: block;
      background: $black;
      position: relative;
      flex: 1 1 0;
      margin-right: 10px;
}

<div class="info f_left">
        <div class="info-wrap">
          <h3 class="f_left">Украина</h3>

          <p class="f_left">ул. Артема, 80
            </p>
          <a href="mailto:">
            <p class="f_left">mail</p>
          </a>
          <a href="tel:+">
            <span class="f_left telephone">+38 </span>
          </a>
        </div>
      </div>

Answer 1

When rendered by browsers, all calculated sizes are rounded to fit the browser's pixel grid. On the retina, the pixel grid is 2 times smaller, so the rounding will be a little more accurate, too precise in your case.
There may be problems in size: width: 24.2%;and its rounding after the browser recalculates the percentages into pixels, but it is impossible to answer more precisely, since the result or at least a screenshot is not visible.
In any case, here's a useful read on the subject: A Designer's Guide to DPI