I'm having trouble fixing the header at the top of my website. When I use position:fixed;, the header shifts to the left and the rest of the content moves up. I've tried adjusting the z-index and padding, but the header still remains off to the left. Can anyone provide a solution for this issue?
Thank you.
<body>
<div class="header_area ">
<div class=" header ">
<div class="logo floatleft">
<img src="images/2016.png" alt="logo" width='100%' align="middle" style="border:5px solid white"/>
</div>
<div class="mainmenu floatright ">
<nav class="main-navigation pull-right hidden-xs hidden-sm">
(now some list there)
.header_area{}
.header
{
position: fixed;
z-index:1000;
padding: 10px 0;
margin: 0 auto;
transition: all 1.3s ease 0s;
-moz-transition: all 1.3s ease 0s;
-webkit-transition: all 1.3s ease 0s;
-o-transition: all 1.3s ease 0s;
-ms-transition: all 1.3s ease 0s;
}
body{
padding: 20px 10px;
font-family: sans-serif, open-sans;
font-size:14px;line-height:20px;color:#414141;
}
nav.main-navigation {
position: relative;
z-index: 9999;
font-family: bebasregular;
}