Unable to format/position my fixed position navigation bar

HTML-CSS
1

Tell us what’s happening:
I cannot seem to get my navigation bar to adjust it’s position at all. It is stuck on the top left portion of the page.
also, how can I remove the underline and blue text from my links and format them like in the example landing page?

THANK YOU

Your code so far


Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36.

Link to the challenge:

2

I can see you have solved this yourself for the most part, good job.

I would suggest using this CSS for the .container, try it out and compare it to what you have now.

.container {
  display: flex;
  /* row is the default you don't really need to set it */
  flex-direction: row;
  position: fixed;
  list-style: none;
  background-color: red;
  padding: 25px 0;
  border: solid;
  border-width: 10px;
  width: 100%;
  justify-content: space-around;
  left: 0;
  top: 0;
  margin: 0;
  box-sizing: border-box;
}
3

Yes, I forgot to update my post. Thank you for helping regardless.

4

I often cannot get “list-style: none;” to activate within a flexbox. It’s now happening in my prices section. Do you have any insight on that please?

The

    bullet points and hyperlink colors/underline will not go away.
5

Two ways of dealing with this:

  1. Set the list-style on the parent element of the list item (the parent element is normally a <ol> or <ul>).
Summary 
<ul class="nav-list">
  <li><a class="nav-list-item" href="#store">STORE</a></li>
  <li><a class="nav-list-item" href="#team">TEAM</a></li>
  <li><a class="nav-list-item" href="#contact">CONTACT</a></li>
</ul>

.nav-list {
  list-style: none;
}
  1. Or, decide to work the other way. Globally remove the list-style for all list elements, like a reset/normalize. Then, when you actually do need a styled list, you set the list to show the list-style.
Summary 
<ul class="bullet-list">
  <li><a class="bullet-list-item">STORE</a></li>
  <li><a class="bullet-list-item">TEAM</a></li>
  <li><a class="bullet-list-item">CONTACT</a></li>
</ul>


/* Put this ul rule at the top of the CSS, along with other global styles, like body, headers, paragraphs etc. */
ul {
  list-style: none;
}

/* When you need a styled list, target it and set the style */
.bullet-list {
  list-style: initial; /* Or specify the styles */
}
6

I went with the second option. Thanks again. If you have any other feedback/criticism of the page, I’m all ears.