Блок слипается в кучу после того как прописал абсолютное позиционирование?

Question

[Максим Иванов]

Если убрать у .intro img {position: relative;} и у .header{position: absolute;}, то всё ок с менюшкой сверху, но картинка не так как нужно. Вот если же добавить эти стили, то картинка ложиться как надо, но вот меню ломается.
Мне нужно оставить картинку как есть и исправить меню. Помогите пожалуйста и с объяснением (если у вас есть время на это или вам не лень), что изменили и что произвело такую ошибку.

<header class="header">
	<a href="#" class="logo"><img src="img/logo.png" alt="Logo"></a>
	<div class="list_right">
		<ul class="list">
			<li><a href="#">Главная</a></li>
			<li><a href="#">О нас</a></li>
			<li><a href="#">Контакты</a></li>
		</ul>
			<a href="#" class="burger_menu"></a>
	</div>
</header>

<div class="intro">
	<img src="img/main_bg.jpg" alt="Студия дизайна">
</div>

css

/*Обнуление стилей==>*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
}

ul, li {
	list-style: none;
}

a {
	text-decoration: none;
}

input {
	padding: 0;
	border: 0;
	border-width: 0;
}
/*<==Обнуление стилей*/



/*Start*/
/*Header==>*/
.header {
	position: absolute;
	z-index: 1;
	margin-left: 99px;
	margin-right: 80px;
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between; 
}

.list_right {
	display: inherit;
	align-items: center;
	margin-bottom: 12px;
}

.list li {
	display: inline-block;
	margin-right: 30px;
	font-family: OpenSans;
	font-style: normal;
	font-weight: normal;
	font-size: 10px;
	line-height: 14px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.list li a {
	color: #000;
}

.burger_menu::before {
	content: "";
	width: 18px;
	height: 2px;
	background-color: #000;
	position: absolute;
	bottom: 5px;
}

.burger_menu {
	width: 18px;
	height: 2px;
	background-color: #000;
	position: absolute;
	right: 9px;
}

.burger_menu::after {
	content: "";
	width: 18px;
	height: 2px;
	background-color: #000;
	position: absolute;
	top: 5px;
}
/*<==Header*/
/*Intro==>*/
.intro img {
	width: 100%;
	position: relative;
}
/*<==Intro*/

Comments

[Ankhena]

Задайте ширину хедеру.
Relative для img в вашем коде вообще не имеет смысла.

p.s. Делайте песочницу с кодом в которой видно проблему.
Картинки можно вставлять любые аналогичных размеров либо использовать заглушки https://placeholder.com/
И прикрепляйте картинки "как надо".

[Антон Литвиненко]

так может код тогда в песочницу и пару скринов как должно быть и как получается?