title: Navigation same width as body
body: <p>I have the following code which contains a navigation bar as well as a &quot;Welcome&quot; message placed on top of a video. My issue is that I'm wanting the navigation and video to both ideally be the same width and both be completely centered within the page horizontally.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;UTF-8&quot;&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
          &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css&quot;&gt;
          &lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; href=&quot;images/metagamepfp.png&quot;&gt;
          &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;styles/styles.css&quot;&gt;
          &lt;script src=&quot;scripts/scripts.js&quot;&gt;&lt;/script&gt;
          &lt;title&gt;MetaGameVGC&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;nav class=&quot;main-nav&quot;&gt;
           &lt;ul&gt;
              &lt;li&gt;
                 &lt;a class=&quot;current&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                 &lt;a href=&quot;pages/articles.html&quot;&gt;Articles&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                 &lt;a href=&quot;pages/teamreports.html&quot;&gt;Team Reports&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                 &lt;a href=&quot;pages/teamcompendium.html&quot;&gt;Team Compendium&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                 &lt;a href=&quot;pages/resources.html&quot;&gt;Resources&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                 &lt;a href=&quot;pages/events.html&quot;&gt;Events&lt;/a&gt;
              &lt;/li&gt;
           &lt;/ul&gt;
        &lt;/nav&gt;
        &lt;section class=&quot;welcome&quot;&gt;
            &lt;video playsinline autoplay muted loop&gt;
              &lt;source src=&quot;videos/pokemon-gym.mp4&quot; type=&quot;video/mp4&quot;&gt;
              Your browser does not support this video tag.
            &lt;/video&gt;
            &lt;span class=&quot;welcome-message&quot;&gt;WELCOME TO METAGAME!&lt;/span&gt;
        &lt;/section&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Here's the current CSS. As you can see, I'm looking to set the width of the video to 980px, and I cannot figure out how to get the navigation to match the width of the video as well.</p>
  <pre><code>/* Navigation Bar Style */
  nav {
      width: 100%;
      text-align: center;
  }
  
  .main-nav ul {
      list-style-type: none;
      display: inline-block;
      font-size: 1.19vw;
      font-weight: bold;
      margin: 0 auto;
  }
  .main-nav li {
      display: inline;
  }
  
  .main-nav a {
      text-decoration: none;
      border-bottom: 2px solid black;
      color: black;
      float: left;
      font-weight: bold;
      padding-left: 1vw;
      padding-top: .75vh;
      padding-bottom: .5vh;
      padding-right: 4vw;
      transition: background-color .25s linear, color .25s linear;
  }
  
  .main-nav a:hover {
      cursor: pointer;
      background-color: black;
      color: white;
      border-bottom: 2px solid black;
      transition: background-color .25s linear, color .25s linear;
  }
  
  .main-nav .current {
      background-color: black;
      color: #ff2c7b;
      border-bottom: 2px solid black;
      position: relative;
  }
  
  .current::before {
      content: &quot;&quot;;
      border: 12px solid black;
      border-color: black transparent transparent transparent;
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -12px;
  }
  
  /* Styling for Welcome */
  .welcome {
      position: relative;
      text-align: center;
      margin-top: 3vh;
  }
  
  video {
      max-width: 980px;
      height: auto;
      padding-left: 1vw;
  }
  
  .welcome-message {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
      width: 100%;
      font-weight: bold;
      font-size: 4vw;
  }
  </code></pre>