title: My nav bar is being compressed ASP.NET
body: <p>I am currently using ASP.NET to create a web form using HTML5 and CSS to style it. The code that I am using on the site.master for the navigation bar is as follows.</p>
  
  <pre><code>&lt;body&gt;
      &lt;header&gt;
          &lt;div class="container"&gt;
              &lt;img src="TGASlogo.png" alt="logo" class="logo"&gt;
  
              &lt;nav&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="~/Home Page.aspx"&gt;Home Page&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="~/"&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="~/"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="~/"&gt;List1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="~/"&gt;List2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="~/"&gt;List3&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="~/"&gt;List4&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="~/"&gt;List5&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="~/Signup.aspx"&gt;Sign Up&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="~/Login.aspx"&gt;Login&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
  
          &lt;/div&gt;
      &lt;/header&gt;
  
          &lt;div&gt;
  
          &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and the style sheet is as follows.</p>
  
  <pre><code>body {
      padding-left: 500px;
      padding-right: 500px;
      margin: 0;
      background: #F0EFE8;
      font-family: 'Work Sans', sans-serif;
      font-weight: 300;
  }
  
  .container {
      width:80%;
      margin:0 auto;
  }
  
  header {
      background: #FFD63C;
  }
  
  header::after {
      content: '';
      display:table;
      clear:both;
  }
  
  .logo {
      float:left;
      padding:5px 0;
  }
  
  nav {
      float:right;
  }
  
  nav ul {
      margin:0;
      padding:0;
      list-style:none;
  }
  
  nav li {
      display:inline-block;
      margin-left:35px;
      padding-top:35px;
  
      position:relative;
  }
  
  nav a {
  color:#444;
  text-decoration:none;
  text-transform:uppercase;
  font-size:15px;
  font-weight:500;
  
  }
  
  nav a:hover {
      color:#FFF;
  
  }
  
      nav a::before {
          content: '';
          display: block;
          height: 5px;
          background-color: #FFF;
          position: absolute;
          top: 0;
          width: 0%;
          transition:all ease-in-out 250ms;
      }
  
      nav a:hover::before{
          width:100%;
      }
  </code></pre>
  
  <p>I am unsure as to why my navigation bar has randomly been squished as shown in the screenshot provided. is there any way that I can make the navigation bar re-adjust in size as people change their browser window size?</p>
  
  <p><a href="https://i.stack.imgur.com/2EqJL.png" rel="nofollow noreferrer">This is a screenshot of how the nav bar looks</a></p>