ul position fixed problems

Hi there

I am having trouble trying to create a fixed UL the problem is that when I do position: fixed the items in the list overlap and occupy the same space. Is there code that can be added or should i try another approach? Would it be easier to fix the position of my header? I tried that but i can't change there alignment.

Here is a copy of my source code header.

<header>

  <div class="row">

  <div class="col">

  <img class="style-logo" src="seasidewhite.png" alt="Seaside Logo">

  <nav class="style-nav">

  <ul>

  <li><a href="*">Home</a></li>

  <li><a href="*">Product</a></li>

  <li><a href="*">Contact Us</a></li>

   </ul>

   </nav>

   </div>

   </div>

</header>

Here is a copy of the css style

html,

html * {

  padding: 0;

  margin: 0;

  box-sizing: border-box;

  font-family: Azo Sans Black, Azo Sans Black Italic, Azo Sans Bold, Azo Sans Bold Italic, Azo Sans Italic, Azo Sans Light, Azo Sans Light Italic, Azo Sans Medium, Azo Sans Medium Italic, Azo Sans Regular;

}

header {

  padding: 32px;

}

.style-logo {

  margin-left: auto;

  margin-right: auto;

  display: block;

  position: fixed;

}

.style-nav ul {

  list-style-type: none;

}

.style-nav ul li a {

  text-decoration: none;

  color: #9E9E9E;

  display: block;

  text-align: center;

  position: fixed;

Thanks in advance