title: Trying to find a way to center multiple elements inside of a div class in CSS
body: <p>I have a good enough knowledge of HTML, but I am just stuck with something related to my responsive design HTML CSS code. I was following the W3 Schools webpage showing how to create a Navbar for a website (<a href="https://www.w3schools.com/howto/howto_js_topnav.asp" rel="nofollow noreferrer">Link</a>).</p>
  
  <p>Here is my current CSS file and <code>index.html</code>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      background-color: #FAEBD7;
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
  }
  
  /* Add a black background color to the top navigation */
  .top-navbar {
    position: relative;
    background-color: #333;
    overflow: hidden;
  }
  
  /* Style the links inside the navigation bar */
  .top-navbar a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  /* Change the color of links on hover */
  .top-navbar a:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* Add a color to the active/current link */
  .top-navbar a.active {
    background-color: #4CAF50;
    color: white;
  }
  
  /* Centered section inside the top navigation */
  .top-navbar a {
  /* float: none; */
  /*   position: absolute; */
  /*   top: 50%; */
  /*   left: 50%; */
  /*   transform: translate(-50%, -50%); */
  }
  
  
  /* Responsive navigation menu - display links on top of each other instead of next to each other (for mobile devices) */
  @media screen and (max-width: 600px) {
    .top-navbar a {
      float: none;
      display: block;
    }
  
    .topnav-centered a {
      position: relative;
      top: 0;
      left: 0;
      transform: none;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;FUBS&lt;/title&gt;
    &lt;meta name="description" content="Elder Scrolls, Fallout, Information, Wiki"&gt;
    &lt;link rel="stylesheet" href="css/mystyle.css"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
    &lt;!--[if lt IE 9]&gt;
         &lt;script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
       &lt;![endif]--&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="top-navbar"&gt;
    &lt;a class="active link" href="index.html"&gt;Home&lt;/a&gt;
    &lt;a class="link" href="scrolls/index-scrolls.html"&gt;The Elder Scrolls&lt;/a&gt;
    &lt;a class="link" href="fallout/index-fallout.html"&gt;Fallout&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="test-div"&gt;
  &lt;/div&gt;
  
  &lt;div style="padding:0 16px;"&gt;
  &lt;br /&gt;
  
  etc. etc. etc.
  
  &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If you run the above code snippet you will get an idea of what I want it to do (If you drag your window smaller you will see the change). </p>
  
  <p>Basically, what I just want to do is to have the nav bar links to be centered (Along with the black bar that goes across the screen). I already have it so that when the screen size if below 600 pixels, it switches to that effect.</p>
  
  <p>I narrowed down the part of the tutorial that was making my nav bar disappear. It has the above from the <code>@media</code> part of the CSS (You will see that it is commented out). In the tutorial, the centered part of the class <code>topnav-centered</code> had only one element, an <code>a</code> tag. Maybe because in my website it has more than one element in the class that it is refusing to work? That is just my guess though.</p>
  
  <p>Any help with this would be appreciated.</p>