CSS3 Media Queries

Hello. The problem is in media queries. I'm a little confused. Indicate where my mistake is. Icon with "Service". At 1200px screen width, I need the width of this block to be 46.1%, and when the screen becomes less than 992px, I need the width of this block to be 55.1%. Made media requests, but the block remains 55.1%. In general, below code and screenshots.

HTML

<div class="container"> <div class="row our_services__box"> <div class="col-md-4"> <div class="box_services__delivery_icon box__border"></div> <p class="our_services__name">Доставка</p> <p class="our_services__des">Благодаря наличию товарных запасов на наших складах, мы гарантируем минимальные сроки доставки приобретенной или заказанной мебели.</p> </div> <div class="col-md-4"> <div class="box_services__installation_icon box__border"></div> <p class="our_services__name">Сборка</p> <p class="our_services__des">Благодаря наличию товарных запасов на наших складах, а также эффективной схеме поставок.</p> </div> <div class="col-md-4"> <div class="box_services__service_icon box__border"></div> <p class="our_services__name">Обслуживание</p> <p class="our_services__des">Благодаря эффективной схеме поставок, мы гарантируем минимальные сроки доставки приобретенной или заказанной мебели.</p> </div> </div> </div> 

CSS

 @media (min-width: 1200px) { .box_services__service_icon { width: 46.1%; } } @media (min-width: 992px) { .box_services__service_icon { width: 55.1%; } }