Issue with sticky-navigation when zooming out

Question

I'm trying to add a fixed-header that sticks to the user screen when scrolling down the page on my website. I've managed to get the header all styled, it just seems that I'm having trouble making it stick to the screen when zooming out (and therefore taking into account different screen sizes).

For example, this is what it looks like at the moment: Current state

I am able to get it to look like this: This is what it looks like with some CSS

position: fixed; width: 100%;

Which makes it span the entire screen. Now, I also want to remove the left margin that is applied to the rest of the content area, so (for my screen size), if I remove the left margin of 225px, then it lines up relatively well. This all breaks down when I zoom out, however, and obviously the margin on the left gets bigger so it looks a bit silly and half-way in the middle of the screen.

Does anyone have any advice on how I can get it to stick to the top and left without there being a margin when I zoom out or anything like that?

The site is here if anyone has any ideas?

HTML:

<div class="logo" style="height: 40px; background-color: purple;">
       <a href="//whiki.online">
                <img class="header-logo" src="/resources/assets/Whiki-Logo.png" width="115px" height="30px" style="padding-top: 5px; margin-left: 20px;">
    </a>
  </div>

CSS:

.logo {
 height: 40px;
 background-color: purple;
}

Answer 1

In order to make the header stick to the top as the user scrolls the page, you'll need to apply the following CSS.

.logo {
  height: 40px;
  background-color: purple;
  
  /* CSS to make the header sticky */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

<div class="logo" style="height: 40px; background-color: purple;position: fixed;top: 0;width: 100%;left: 0;z-index: 1;">
  <a href="//whiki.online">
    <img class="header-logo" src="/resources/assets/Whiki-Logo.png" width="115px" height="30px" style="padding-top: 5px; margin-left: 20px;">
  </a>
</div>