Если точнее , то есть у меня есть Header:
Если сделать окно браузера в пол экрана , то получается:
Код Header'a:
HTML :
<!--Хиадер-->
<div class="BackgroundHeader"></div>
<div class = "row HeaderText">
<div class = "col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 ImgBrand">
<!--<img src = "https://i.pinimg.com/originals/f4/ae/17/f4ae17e0fdef8361185405752c460bd5.png" width="250" height = "150">-->
</div>
<div class = "col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 Self-development">
<p><b>Саморазвитие</b></p>
</div>
<div class = "col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 Lessons">
<p><b>Уроки</b></p>
</div>
<div class = "col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 Shop">
<p><b>Магазин</b></p>
</div>
<div class = "col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 Office">
<p><b>Личный кабинет</b></p>
</div>
<div class = "col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 Help">
<p><b>Помощь</b></p>
</div>
</div>
</div>
CSS :
.BackgroundHeader
{
width:3000px;
height:100px;
position:relative;
border:1px;
background-color:white;
z-index:4;
}
.HeaderText
{
position:relative;
top:-65px;
z-index:6;
font-size:18px;
}
.Self-development
{
left:185px;
}
.Lessons
{
left:75px;
}
.Shop
{
left:-105px;
}
.Office
{
left:-275px;
}
.Help
{
left:-365px;
}
.ImgBrand
{
position:relative;
top:-60px;
}
//Также там есть место под бренд,но сейчас он просто отсутствует,я его потом доставлю.Сейчас мне главное понять по какому принципу это работает.
//При возможности хотел бы получить ответ не обязательно полный (можно сказать что искать),но на чистом HTML-CSS.
margin
'ы и media query