Съезжает карточка товара вправо при верстке на флексах
Пытался задать размер блокам карточкам в процентах, но не выходит:
body {
margin: 0;
display: flex;
flex-direction: column;
}
header {
height: 72px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
padding-left: 80px;
padding-right: 80px;
}
.leftlogo {
margin-left: 8px;
}
.rightlogo {
margin-right: 16px;
}
.enter {
font-family: Roboto;
font-size: 13px;
height: 40px;
width: 78px;
border: 2px solid #E0E0E0;
background-color: #fff;
}
.input {
font-style: Roboto;
width: 100%;
font-weight: 50;
color: black;
border-top: none;
border-left: none;
border-right: none;
border-bottom: #ede6e6;
outline: none;
border-bottom-style: solid;
}
::placeholder {
color: #ede6e6;
font-size: 11px;
text-transform: uppercase;
}
.forma {
margin-top: 32px;
padding-left: 80px;
padding-right: 80px;
}
.main {
display: flex;
flex-direction: column;
padding-left: 80px;
padding-right: 80px;
}
.label {
margin-top: 56px;
padding-left: 80px;
padding-right: 80px;
}
.firstrow {
display: flex;
flex-direction: row;
justify-content: space-between;
}
<!--шапка-->
<header>
<div class="leftlogo">
<img src="logo.svg" alt="">
</div>
<div class="rightlogo">
<button class="enter">
Войти
</button>
<img src="basket.svg" alt="">
</div>
</header>
<!--форма-->
<div class="forma">
<p><input class="input" name="login" placeholder="Поиск по ресторанам и кухням"></p>
</div>
<!--Лэйбл ресторанов-->
<div class="label">
<h1>Рестораны в Москве</h1>
</div>
<!--Галлерея Ресторанов-->
<div class="main">
<div class="firstrow">
<div class="macdonalds wid">
<img class="magaz" src="1.jpg" alt="">
<h3>Макдоналдс-Газетный</h2>
<p>₽₽ • Бургеры</p>
<p>25 - 35 мин</p>
</div>
<div class="dimsum wid">
<img class="magaz" src="2.jpg" alt="">
<h3>DimSum & Co — ЦДМ</h3>
<p>₽ • Японская • Китайская • Азиатская</p>
<p>40 - 50 мин</p>
</div>
<div class="dvijok wid">
<img class="magaz" src="3.jpg" alt="">
<h3>ДвижОК — Манежная</h3>
<p>₽ • Американская • Европейская</p>
<p>35 - 45 мин</p>
</div>
</div>
<div class="secondrow"></div>
<div class="thirdrow"></div>
</div>