Не пойму в чем проблема? Создаю новый контейнер(select-contener), а он становится рядом с предыдущим(img-contener) то есть слева , а по факту под ним должен быть , что делаю не так ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UnderArmour.ru</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<header>
<div class="head">
<div class="img-head">
<img src="./logo.svg" alt="">
</div>
<nav class="nav-list">
<ul class="list">
<li class="nav-item">ГЛАВНАЯ</li>
<li class="nav-item">О НАС</li>
<li class="nav-item">НОВОСТИ</li>
<li class="nav-item">ГДЕ НАЙТИ НАШУ ПРОДУКЦИЮ</li>
<li class="nav-item">КОНТАКТЫ</li>
</ul>
</nav>
</div>
</header>
<main>
<div> <img src="./AJ rush 1600х630.png" alt=""></div>
<div class="text-contener">
<h1>UNDER ARMOUR ДЕЛАЕТ ТЕБЯ ЛУЧШЕ</h1>
<p>Бренд Under Armour со штаб-квартирой в городе Балтимор, штат Мэриленд, является ведущим производителем и
дистрибьютором высокотехнологичной функциональной спортивной одежды, обуви и аксессуаров. Разработанные с
целью сделать каждого атлета лучше, продукты бренда доступны для покупателей, ведущих активный образ жизни, по всему миру.
С 2017 года бренд Under Armour представлен в России. Экипировку Under Armour выбирают такие известные во всем
мире спортсмены, как Стефен Карри, Энтони Джошуа, Маргарита Мамун, Александра Солдатова, а также звезда
американского кино и бывший рестлер Дуэйн «Скала» Джонсон. Цифровая платформа Under Armour MapMyFitness™
объединяет самое большое в мире сообщество людей, занимающихся спортом и следящих за своим здоровьем.
Достигай большего с высокотехнологичной спортивной одеждой от Under Armour!</p>
</div>
</main>
<h2>НАШИ НОВОСТИ</h2>
<div class="img-contener">
<div class="img-1">
<img src="./the ZAL - ver. 1.a4a3f6a6f932f151bc2a50da40d74878.jpg" alt="">
<div class="title">UNDER ARMOUR И THE Z.A.L.</div>
<div class="description">РАДЫ ОБЪЯВИТЬ О СОТРУДНИЧЕСТВЕ С СЕРВИСОМ ПОМИНУТНОЙ ОПЛАТЫ ТРЕНИРОВОК THE Z.A.L.!</div>
</div>
<div class="img-2">
<img src="./TOWIT slogan_UA_r021.ef3ae9de49638aaa2e9298234f0d9350.png" alt="">
<div class="title">ЕДИНСТВЕННЫЙ ПУТЬ — ЭТО ПРЕОДОЛЕНИЕ</div>
<div class="description">МЫ ДОСТИГАЕМ СВОИХ ЦЕЛЕЙ ЧЕРЕЗ ТЯЖЕЛЫЙ ТРУД, ЧЕРЕЗ ПОТ И ПРЕПЯТСТВИЯ</div>
<div class="button"><input type="button" value="ПОКАЗАТЬ ЕЩЕ"></div>
</div>
<div class="img-3">
<img src="./1633564_full.a4a3f6a6f932f151bc2a50da40d74878.jpg" alt="">
<div class="title">КОЛЛЕКЦИЯ PROJECT ROCK: ЧЕРЕЗ ТРУД И ПРЕОДОЛЕНИЕ</div>
<div class="description">ДЛЯ ТЕХ, КТО ТРЕНИРУЕТСЯ УСЕРДНЕЕ ВСЕХ</div>
</div>
</div>
<div class="select-contener">
<select name="nubexSelect" size="3" multiple form="nubexForm">
<option>Магазины</option>
<option>Новости</option>
<option>Отзывы</option>
<option>Форум</option>
</select>
</div>
</div>
body{
margin: 0;
padding: 0;
}
.head{
display: flex;
border:2px solid red;
}
.img-head{
width: 50px;
color: #1d1d1b;
/* margin-top: 20px; */
padding: 20px;
}
.nav-list{
margin: 0 auto;
}
.nav-item{
margin-right: 20px;
font-size: 14px;
font-weight: 500;
list-style-type: none;
}
.list{
display: flex;
border:2px solid green;
font-weight: 500;
align-items: center;
margin-top: 30px;
}
img{
width: 100%;
}
h1{
text-align: center;
}
p{
font-family: armour, helveticaNeueCyr, sans-serif;
text-align: center;
padding: 100px;
font-weight: 500;
font-size: 18px;
}
.text-contener{
width: 100%;
max-width: none;
margin: 0 auto;
}
h2{
text-align: center;}
.img-contener{
display: flex;
justify-content: center;
}
.img-1{
width: 350px;
height: 350px;
border: 10px solid white;
}
.img-2{
width: 350px;
height: 350px;
border: 10px solid white;
}
.img-3{
width: 350px;
height: 350px;
border: 10px solid white;
}
.title{
font-weight: bold;
font-size: 18px;
}
.description{
margin-top: 10px;
font-size: 14px;
}
.button{
/* position:relative ; */
margin-top: 30px;
margin-left: 100px;
width: 200px;
}
button{
font-size: 40px;
}
