Перемещение обьектов на странице при расширении окна браузера

Question

Здрасьте, Помогите разобраться с кодом, я сейчас на этапе вношения корректировок в @media quieries и элементы на странице при расширении окна браузера перемещаются в левую сторону хотя я не вписал нигде в коде функции float: left без понятия как это исправить пробовал установить максимальную ширину и высоту и как то подравнять но все равно обьекты при расширении смещаются влево и выглядит некрасиво прошу помочь.

.page-wrapper {
  position: relative;
  width: 100%;
  margin: 0px auto;
  padding: 0px 50px;
}
.container {
    width: 50%;
    margin: 0 auto;
}
.grid {
   display: flex;
}
#features {
    margin-top: -20px;
}
#features .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    width: 5vw;
    margin-top: 50px;
}
#features .desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 125px;
    width: 60vw;
    padding-left: 50px;
    font-size: 25px;
}
@media only screen and (min-width: 480px) and (max-width: 767px){
 .page-wrapper {
    padding: 0px 0px;
  }
#features {
  margin-top: 120px;
}
#features .icon {
   margin-left: 120px;
   margin-top: -20px;
}
#features .desc {
  font-size: 20px;
  width: 100%;
  padding: 0;
  text-align: center;
  height: 230px;
  margin-left: -130px;
}
}

<div class="container">
 <section id="features">
<div class="grid">
<div class="icon">
<img src="https://img.icons8.com/ultraviolet/80/000000/quality.png" alt="icons">
</div>
<div class="desc">
                 <h2> High quality </h2>
                 <p> You'll get the highest quality products available on the market </p>
</div>
</div>
<div class="grid">
<div class="icon">
<img alt="truck-sign" src="https://img.icons8.com/ultraviolet/80/000000/truck.png"/>
</div>
<div class="desc">
                 <h2> Fastest delivery dates</h2>
                 <p> Our couriers deliver orders in no time</p>
</div>
</div>
<div class="grid">
<div class="icon">
<img alt="love-sign" src="https://img.icons8.com/ultraviolet/80/000000/trust.png"/>
</div>
<div class="desc">
                 <h2> Client oriented</h2>
                 <p> We value our clients thats why we offer the highest service quality to you </p>
</div>
</div>
</section>

<!-- begin snippet: js hide: false console: true babel: false -->

БЛОГ НА HUSL

Перемещение обьектов на странице при расширении окна браузера

Ответы (0 шт):