У меня есть header на странице
<div class="cont">
<div class="header">
<a href='#' class="logo">Logo</a>
<div class='header_r'>
<nav class="h_menu">
<ul>
<li><a class='newspage' href='news.html'>News</a></li>
<li><a class='mainpage' href='main.html'>Main</a></li>
<li><a class='saved' href='saved.html'>Saved</a></li>
<li><a class='myg' href='mygroups.html'>My groups</a></li>
<li><a class='createg' href='#'>Create group</a></li>
</ul>
</nav>
<div class="h_search_block">
<img class='h_lupa' src="icons/lupa3.png" alt="">
<input placeholder='Global search...' class='h_search' type="text">
</div>
<a href='#' style='height: 27px;'class="login">Log In</a>
</div>
</div>
</div>
И его css:
*{
margin: 0;
padding: 0;
font-family: 'Rubik', sans-serif;
text-decoration:none;
list-style:none;
}
body{
background:#E5EBF1;
overflow-x:hidden;
}
.middle{
display:flex;
justify-content:center;
padding-top: 20px;
width: 100% !important;
height: 100%;
background-image:url("../fon.jpg");
background-size:cover;
background-repeat:repeat-y;
}
.header{
background:white;
width:100%;
height:45px;
display:flex;
box-shadow: 0 0 10px #E5E5E5;
position:relative;
}
.h_left{
display:flex;
position:absolute;
left: 0;
}
.header_r{
display:flex;
position:absolute;
right: 100px;
}
.logo{
color:#5260E5;
font-size:30px;
margin-left: 10px;
margin-top: 3px;
}
.h_menu{
padding-top:10px;
}
.h_menu ul{
display:flex;
}
.h_menu a{
font-size:20px;
margin-left:40px;
white-space:nowrap;
}
.myg{
color:#444444;
}
.createg{
color:#444444;
}
.mainpage{
color:#5260E5;
}
.saved{
color:#444444;
}
.newspage{
color:#444444;
}
.h_menu a:hover{
color:#5260E5;
}
.h_search_block{
position:relative;
margin-left:3.5%;
margin-right:3.5%;
}
.h_search{
width:272px;
background:#E5EBF1;
height:25px;
margin-top:4px;
outline:none;
padding:5px 18px 5px 40px;
font-size:14.5px;
color:grey;
font-family: 'Noto Sans TC', sans-serif;
border:none;
}
.h_lupa{
position:absolute;
width:20px;
z-index:3;
left:10px;
top:12.5px;
}
.login{
font-size:20px;
margin-top:10px;
color:#444444;
white-space:nowrap;
}
.login:hover{
color:#5260E5;
}
Все работает хорошо , но дело в том , что когда я вставляю этот же код на другую страницу , мой header уменьшается , а также увеличивается ширина самой html страницы , будто мой header не вмещается , хотя опять же этот код работал корректно на другой странице
