JSFiddle - React, Tailwind, and code Playground

HTML

<title>Xatruch League</title> 
</head>
  <body>
    <header >
      <a href="index.html" id="logo">        
        <h1>Xatruch League</h1> 
        <h2>Season One</h2>
      </a>
      <nav> 
        <ul>
          <li><a href="index.html"> Portofolio</a></li> 
          <li><a href="About.html">About</a></li>
          <li><a href="Contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper"> 
    <section>
       <ul>
         <li>
           <a href="Img/numbers-01.jpg">
             <img src="Img/numbers-01.jpg" alt="">
             <p>Xtruch League .</p> 
           </a>
         </li>
         <li>
           <a href="Img/numbers-02.jpg">
             <img src="Img/numbers-02.jpg" alt="">
             <p>Teams.</p> 
           </a>
         </li>
         <li>
           <a href="Img/numbers-06.jpg">
             <img src="Img/numbers-06.jpg" alt="">
             <p>Ladders.</p> 
           </a>
         </li>
         <li>
           <a href="Img/numbers-09.jpg">
             <img src="Img/numbers-09.jpg" alt="">
             <p>Forums.</p> 
           </a>
         </li>
         <li>
           <a href="Img/numbers-12.jpg">
             <img src="Img/numbers-12.jpg" alt="">
             <p>Contact meh.</p> 
           </a>
         </li>
      </ul>
    </section>
    <footer>
      <a href="https://twitter.com/"><img src="Img/twitter-wrap.png" alt="Twitter Logo"></a>
      <a href="https://www.facebook.com/"><img src="Img/facebook-wrap.png" alt="Facebook Logo"> </a>
      <p>&copy; 2015 Xatruch League</p>
    </footer> 
    </di>

CSS

a {
    text-decoration: none;
}

#wrapper {
    max-width: 940px; 
    margin: 0 auto; 
    padding: 0 5%;
}

#logo {
    text-align: center; 
    margin: 0;
    color:red;
}