css в разрешении 1920x1080 на хромированном фоне на элементах

Question

Самая большая проблема с CSS в следующих условиях:

• только хром
• разрешение 1920x1080

В Firefox работают нормально, в другом разрешении работают нормально.

В чем проблема: цвет фона попадает на элементы списка:

Мой код CSS:

  body {
    background: #2D2F39;
    color: #9E9A98;
    font-size: 10pt;
  }
  .liner{
        margin-top: 1em;
        background: #353C48 ;
    }

 .line-item {
        background: rgba(0,0,0,0.1) ;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing:border-box;
        padding: 5px 1em;
        margin-bottom: 10px;
    }
    .line-item h3{
        margin: 0;
        font-size: 12pt;
        color: #C21F39 ;
        padding: 2px 5px 0;
        font-weight: normal;
    }
    .line-item h3:hover{
        color: #fff;
        /*border-bottom: 1px dotted #ccc;*/
    }
    .line-item p{
        color: #bbb;
        margin-top: 0;
    }

HTML например:

<div   class="liner ">
            <div   class="line-item" ><a  href="#/questions/General-RCE-quesions" class=""><h3 >
                        # General RCE quesions
                    </h3></a>
                <p >
                    <span  class="fa fa-arrow-right"></span> 
                    The general question about Reverse code engineering here... [Debugging, Cracking, Unpacking]</p>
            </div>
        </div>

примечания: я использую webpack для этого, и когда пытаюсь проверить элемент, это временная фиксация.

Вы можете попробовать это:

https://webscene.ir/#/tools

Измените некоторые страницы в этом разделе с помощью хрома и разрешения 1920x1080.