title: Alternative to display:flex
body: <p>Trying to get rid of display: flex because its not compatible with internet explorer versions. Need an alternative to display my header inline and centered. I've tried to use inline-block and block, but wasn't getting any luck.</p>
  
  <p>css:</p>
  
  <pre><code>    html, body {
          position: relative;
          margin: 0;
          padding: 0;
          background-image: url("backround.jpg");
          background-repeat: repeat-y;
      }
      /*Nav Menu/Home Page*/
  
      .index-header {
          display: flex;
          position: fixed;
          justify-content: center;
          align-items: center;
          width: 100%;
          background-image: url("header.jpg");
          background-position: center;
          z-index: 1;
          text-transform: uppercase;
          border-bottom: 5px solid #ff8000;
          border-top: 5px solid #ff8000;
          text-shadow: 2px 2px #000;
      }
  
      header h2 {
          font-family: Georgia;
          font-size: 1.6em;
          color: #fff;
          text-shadow: 3px 3px #000;
      }
  
      nav {
          padding: 1%;
          overflow: hidden;
      }
  
      nav a {
          float: left;
          display: block;
          color: #ff8000;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
          font-size 17px;
          font-family: helvetica;
          letter-spacing: 2px;
      }
  
      nav li, nav ul{
          list-style: none;
      }
  
      nav a:hover {
          background-color: #fff;
          color: #ff8000;
      }
  
      nav .material-icons {
          padding-bottom: 5px;
          display: none;
          font-size: 36px;
          color: #ff8000;
      }
  
      @media screen and (max-width: 600px) {
      nav a:not(:first-child) {display: none;}
      nav .material-icons {
          float: left;
          display: block;
      }
      }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html lang="en-us"&gt;
      &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" href="styles/normalize.css"&gt;
          &lt;head&gt;
              &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
              &lt;link rel="stylesheet" href="styles/style.css"&gt;
              &lt;link rel="stylesheet/less" type="text/css" href="styles/style.less" /&gt;
              &lt;script src="less.js" type="text/javascript"&gt;&lt;/script&gt;
              &lt;title&gt; Knox Enterprises Inc.&lt;/title&gt;
          &lt;/head&gt;
          &lt;body&gt;
              &lt;header class="index-header"&gt;
                  &lt;nav&gt;
                      &lt;i class="material-icons"&gt;menu&lt;/i&gt;
                      &lt;a href="index.html"&gt;Home&lt;/a&gt;
                      &lt;a href="About.html"&gt;About&lt;/a&gt;
                      &lt;a href="Contact.html"&gt;Contact&lt;/a&gt;
                  &lt;/nav&gt;
                  &lt;h2&gt;Knox Enterprises Inc.&lt;/h2&gt;
              &lt;/header&gt;
  </code></pre>