nav bar won't display horizontally when fully expanded in the browser

Question

I am trying to get my nav bar to display horizontally in a line at the top of my web page below my h1 tag. I tried all sorts of different methods to get it to line up horizontally but it won't change. My nav bar continues to display vertically centered. I want it to be a thin bar up at the top below the h1. As of right now, it displays with each li stacked on top of the other instead of side by side. Any help or ideas are appreciated.

#wrapper{   
        background-color: #FFFFFF;
        color: #000066;
        min-width: 700px; 
        max-width: 1024px;
        margin-right: auto;
        margin-left: auto;
        padding-top: 0px;
        }

h1 {
        background-color: darkcyan;
        color: #74ebd5;
        background-position: center;
        background-repeat: no-repeat;
        text-align: center;
        font-size: 3em;
        line-height: 80%;
        padding: 30px;
        text-shadow: #CCCCCC;
        margin-bottom: 0;
        }

main {
        margin-left: 180px;
        padding-bottom: 100px;
        }

ul {
    list-style-type: none;
    margin: 0;
    padding: 10px;
    overflow: hidden;
    background-color: #333;
    width: 100%;
    }
li a {
   display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}
nav{    display:inline-block;
        width: 100%;
        font-weight: bold;
        background-color: grey;
        }
 nav ul {
    list-style: none;
    width: 100%;
    border: 1px solid ;
    text-align: right;
    display:inline-block;
}
nav a{
        text-decoration: none;
        border: 1px solid;
        width: 100%
        } 
nav a:link{color:cyan;}
nav a:visited{color:#6699FF;}
nav a:hover{color: gold;}

<div id="wrapper">
<header>
<h1>Polar Bar</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li> 
<li><a href="menu.html">Menu</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="social.html">Social</a></li>
</ul>
</nav>

Answer 1

I don't understand your question. what did you want?.But Is this you want?

#wrapper{   background-color: #FFFFFF;
        color: #000066;
        min-width: 700px; 
        max-width: 1024px;
        margin-right: auto;
        margin-left: auto;
        padding-top: 0px;
        }

h1 {background-color: darkcyan;
        color: #74ebd5;
        background-position: center;
        background-repeat: no-repeat;
        text-align: center;
        font-size: 3em;
        line-height: 80%;
        padding: 30px;
        text-shadow: #CCCCCC;
        margin-bottom: 0;}

main {margin-left: 180px;

        padding-bottom: 100px;
        }

ul {
    list-style-type: none;
    margin: 0;
    padding: 10px;
    overflow: hidden;
    background-color: #333;
    width: 98% !important;

}



li a {


   display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}



nav{    display:inline-block;
        width: 100%;
        font-weight: bold;
        background-color: grey;
        }

 nav ul {
    list-style: none;
    width: 100%;
    border: 1px solid;
    text-align: right;
    display: inline-block;
}
nav > ul > li {
    float: left;
    display: inline-block;
}
nav a{text-decoration: none;
        border: 1px solid;
      } 




nav a:link{color:cyan;
}
nav a:visited{color:#6699FF;}
nav a:hover{color: gold;}

<div id="wrapper">
<header>
<h1>Polar Bar</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li> 
<li><a href="menu.html">Menu</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="social.html">Social</a></li>
</ul>
</nav>
  </header>
</div>

Answer 2

Make the li elements inline-block, and add box-sizing:border-box:

CSS: #wrapper {
  background-color: #FFFFFF;
  color: #000066;
  width: 700px;
  max-width: 1024px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 0px;
}

h1 {
  background-color: darkcyan;
  color: #74ebd5;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  font-size: 3em;
  line-height: 80%;
  padding: 30px;
  text-shadow: #CCCCCC;
  margin-bottom: 0;
}

main {
  margin-left: 180px;
  padding-bottom: 100px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 10px;
  overflow: hidden;
  background-color: #333;
  width: 100%;
  box-sizing: border-box;
}

li {
  display: inline-block;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
  box-sizing: border-box;
}

nav {
  display: inline-block;
  width: 100%;
  font-weight: bold;
  background-color: grey;
}

nav ul {
  list-style: none;
  width: 100%;
  border: 1px solid;
  text-align: right;
  display: inline-block;
}

nav a {
  text-decoration: none;
  border: 1px solid;
  width: 100%;
}

nav a:link {
  color: cyan;
}

nav a:visited {
  color: #6699FF;
}

nav a:hover {
  color: gold;
}

<div id="wrapper">
  <header>
    <h1>Polar Bar</h1>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="menu.html">Menu</a></li>
        <li><a href="aboutus.html">About Us</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="social.html">Social</a></li>
      </ul>
    </nav>