Есть такая верстка:
body {
width: 1300px;
max-width: 1300px;
margin: 0 auto;
padding: 0;
font-size: 16px;
background: #fff;
}
.wrapper {
width: 960px;
max-width: 960px;
margin: 0 auto;
height: 2500px;
}
header {
padding: 0px 0px;
display: flex;
width: 960px;
background: red;
}
header .logo {
width: 170px;
}
header .logo .textBig {
font-family: 'PT Sans Caption', sans-serif;
font-size: 30px;
color: #ff0000;
}
header .logo span.hashtag {
color: #000;
}
header .logo .textMin {
margin-top: -7px;
color: #bcbcbc;
font-size: 16px;
letter-spacing: 00px;
}
header .fix {
position: fixed;
z-index: 99999;
/*background: #fff;*/
width: 100%;
left: 0;
top: 0;
}
<div class="wrapper">
<header>
<div class="fix">
<div class="logo">
<div class="textBig"><span class="hashtag">#</span>Логотип</div>
<div class="textMin">слоган</div>
</div>
</div>
</header>
<div class="page">
<h1>Очень найкрутейший супер-пупер заголовок страницы</h1>
<div class="imagePost">
<div class="cardPost">
<div class="preView">
<div class="title">Очень краткое название информативное статьи</div>
<div class="opis">Описание статьи. Описание статьи, описание статьи, и еще раз это же самое описание этой чудесной статьи...</div>
</div>
</div>
</div>
</div>
Получается что страница идет по центру, и ее ширина 960px, а фиксированная шапка должна быть на весь экран всегда, но так чтобы контент в ней был на 960px, и был по центру (а сейчас логотип прижат к левому краю).
Если убрать в header .fix { left:0;
тогда получается что шапка уже не дотягивает до левого края.
Буду благодарен за помощь.