How does the position sticky property work

Question

I want to make the navigation bar stick to the top of the viewport once a user scrolls the page, but it's not working and I have no idea as to why that is and if you can please help, I would be grateful. Have shared my HTML and CSS code:

.container { 
  min-height: 300vh; 
} 
.nav-selections { 
  text-transform: uppercase; 
  letter-spacing: 5px; 
  font: 18px "lato",sans-serif; 
  display: inline-block; 
  text-decoration: none; 
  color: white; 
  padding: 18px; 
  float: right; 
  margin-left: 50px; 
  transition: 1.5s; 
} 
.nav-selections:hover{ 
    transition: 1.5s; 
    color: black; 
} 

ul { 
    background-color: #B79b58; 
    overflow: auto; 
} 

li { 
  list-style-type: none; 
}

<main class="container"> 
      <nav style="position: sticky; position: -webkit-sticky;"> 
            <ul align="left"> 
                <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li> 
                <li><a href="#/about" class="nav-selections">About</a></li> 
                <li><a href="#/products" class="nav-selections">Products</a></li> 
                <li><a href="#" class="nav-selections">Home</a></li> 
          </ul> 
    </nav> 
</main>

Answer 1

Do check if an ancestor element has an overflow set for eg. overflow:hidden, following which try toggling it. You may have to inspect the DOM tree higher than you expect =). This may however, affect your position:sticky on a descendant element.