title: Tables Not Aligning/Can't fix resolution
body: <p>This is the first site I've made, and I'm just struggling with a few things. Let me explain the issues.</p>
  <ol>
  <li><p>I have a screen with a resolution of 1366 X 768, which I have designed on, and it looks great there. However, when I move it over to my larger screen(2560X1080), several elements shift around and it looses the design that I intended. How do I set a max resolution? I've tried, but nothing seems to work.</p>
  </li>
  <li><p>I have a table set up half way down my page, and I can NOT get them to align horizontally. I probably just have too much code, and it's made a mess somehow.</p>
  </li>
  </ol>
  <p>Help appreciated.</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 {
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
    width: 70%;
    height: 2000px;
    padding-top: 100px;
    max-width: 900px;
  }
  
  div#wrapper {
    max-width: 1000px;
    margin: 0 auto;
    box-shadow: 0 0 10px #777;
  }
  
  .top {
    border: solid 1px black;
    margin: 0 auto;
    width: 100%;
    padding: ;
    height: 200px;
  }
  
  h1 {
    color: #cc4f41;
    text-decoration: ;
  }
  
  div {
    display: block;
    height: 225px;
  }
  
  .headertext {
    font-size: 25px;
    float: right;
    margin-top: 30px;
    margin-left: 50px;
  }
  
  .japanname {
    margin-left: 600px;
    margin-top: 30px;
    position: absolute;
    float: left;
    font-size: 30px;
  }
  
  .rank {
    float: left;
    margin-left: 50px;
    position: absolute;
    margin-top: 115px;
    margin-left: 550px;
    font-size: 10px;
  }
  
  .container {
    position: relative;
    width: 80%;
  }
  
  .logoimage {
    height: auto;
    margin-left: 2%;
    float: left;
    padding-left: 100px;
    height: 200px;
    width: 200px;
    display: flex;
    flex-direction: row;
  }
  
  .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: ;
    overflow: hidden;
    width: 30%;
    height: 100%;
    transform: scale(0);
    transition: .3s ease;
  }
  
  .container:hover .overlay {
    transform: scale(1);
  }
  
  .text {
    color: #cc4f41;
    font-family: permanent marker;
    font-size: 20px;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  
  
  /* basic info box*/
  
  .info {
    margin: 0 auto;
    max-width: 900px;
    padding-top: 17%;
    height: 600px;
    border-radius: 100%;
    background-image: ;
  }
  
  .whois {
    font-size: 40px;
    margin-left: 18%;
    margin-top: 5%;
    color: #ebd234;
    position: absolute;
    font-kerning: auto;
    line-height: 35px;
    font-family: permanent marker;
  }
  
  .infopara {
    margin-left: 15%;
    margin-right: 50%;
    margin-top: 170px;
    position: absolute;
    font-size: 12px;
  }
  
  .fullbody {
    position: absolute;
    float: right;
    margin-left: 33%;
    max-width: 25%;
  }
  
  .hw {
    margin-top: 120px;
    margin-left: 470px;
    height: 30px;
    position: absolute;
    border: 2px #cc4f41 dotted;
    border-radius: 40%;
    padding: 20px;
    font-size: 14px;
  }
  
  .infotable {
    position: absolute;
    margin-top: 350px;
    margin-left: 100px;
    padding: 10px;
    text-align: center;
    table-layout: fixed;
    width: 300px;
  }
  
  .infotable th {
    font-size: 20px;
    color: #cc4f41;
    border-bottom: 2px solid #cc4f41;
  }
  
  
  /*abilities*/
  
  .abilities {
    height: 600px;
    margin: 0 auto;
  }
  
  .head2 {
    font-size: 30px;
    margin-left: 70px;
    margin-top: 33px;
    height: 50px;
  }
  
  .glove {
    position: absolute;
    max-width: 10%;
  }
  
  .abhead {
    position: absolute;
    margin-left: 75px;
    font-size: 20px;
    font-style: oblique;
  }
  
  .twocolumn {
    width: 45%;
    display: inline-block;
    height: 400px;
    padding-top: 5%;
    padding-left: 25px;
    border: 5px solid black;
    border-radius: 30%;
  }
  
  .dot2 {
    position: absolute;
    width: 15%;
    opacity: 50%;
  }
  
  
  /*disciples*/
  
  .disciple {
    background-color: black;
    height: 500px;
  }
  
  .genos {
    position: absolute;
    color: white;
    margin-top: 5%;
    max-width: 35%;
  }
  
  .head3 {
    font-size: 30px;
    margin-left: 80%;
    padding-top: 3%;
    height: 50px;
    color: white;
  }
  
  .h3 {
    color: white;
    position: absolute;
    font-size: 40px;
    margin-left: 25%;
    margin-top: 20%;
    font-family: permanent marker;
  }
  
  .discp {
    color: white;
    margin-left: 37%;
    padding-top: 36%;
    padding-right: 10%;
    font-size: 12px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;link rel="stylesheet" href="css/style.css"&gt;
    &lt;title&gt;Saitama&lt;/title&gt;
    &lt;link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&amp;display=swap" rel="stylesheet"&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;!-- top box --&gt;
  
  
    &lt;div class="top"&gt;
  
      &lt;div class="container"&gt;
        &lt;img src="img/closeupface.png" style="float:left" class="logoimage"&gt;
  
        &lt;div class="overlay"&gt;
          &lt;div class="text"&gt;Just a hero for fun&lt;/div&gt;
        &lt;/div&gt;
  
  
        &lt;div class="headertext" style="float:right"&gt;
          &lt;h1&gt;Saitama&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="japanname"&gt;サイタマ&lt;/div&gt;
        &lt;div class="rank"&gt;B-Class: Rank 7&lt;/div&gt;
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;!-- basic info box --&gt;
  
    &lt;div class="info"&gt;
      &lt;div class="whois"&gt;WHO IS
        &lt;BR&gt; HE?&lt;/div&gt;
      &lt;div class="infopara" align="center"&gt;The main protagonist of the series and the titular One-Punch Man and the most powerful being to exist in the series. Saitama faces a self-imposed existential crisis, as he is now too powerful to gain any thrill from battle.&lt;/div&gt;
      &lt;table class="infotable"&gt;
        &lt;tr&gt;
          &lt;th&gt;AGE&lt;/th&gt;
          &lt;th&gt;GENDER&lt;/th&gt;
          &lt;th&gt;JOB&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;25&lt;/td&gt;
          &lt;td&gt;Male&lt;/td&gt;
          &lt;td&gt;Hero&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
      &lt;div class="hw" style="float:right"&gt;175cm&lt;br&gt;70kg&lt;/div&gt;
      &lt;img src="img/fullbody.png" style="float:right " class="fullbody"&gt;
    &lt;/div&gt;
  
    &lt;br&gt;&lt;br&gt;&lt;br&gt;
  
    &lt;!-- abilities --&gt;
  
    &lt;div class="abilities"&gt;
      &lt;img src="img/glove-01.png" class="glove"&gt;
      &lt;div class="head2"&gt;ABILITIES&lt;/div&gt;
      &lt;!-- color for background : #ebd234 --&gt;
      &lt;div class="twocolumn" style="background-color: #ebd234"&gt;
  
        &lt;div class="abhead"&gt;Unparalleled Strength&lt;/div&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  
        &lt;div class="abhead"&gt;Enhanced Leap&lt;/div&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  
        &lt;div class="abhead"&gt;Shockwave Generation&lt;/div&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  
        &lt;div class="abhead"&gt;Air Manipulation&lt;/div&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  
        &lt;div class="abhead"&gt;Non-physical interaction&lt;/div&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  
        &lt;div class="abhead"&gt;Unparalleled Speed &amp; Reflexes&lt;/div&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  
        &lt;div class="abhead"&gt;Immeasurable Dexterity&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="twocolumn" style="background-color: #cc4f41"&gt;
  
        &lt;div class="abhead"&gt;Immeasurable Agility&lt;/div&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  
        &lt;div class="abhead"&gt;Immense Stamina&lt;/div&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
        &lt;img src="img/face-01.png" class="dot2"&gt;
        &lt;div class="abhead"&gt;Invulnerability&lt;/div&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  
        &lt;div class="abhead"&gt;Enhanced Lung Capacity&lt;/div&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  
        &lt;div class="abhead"&gt;Vacuum Adaptation&lt;/div&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  
        &lt;div class="abhead"&gt;Temperature Immunity&lt;/div&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  
        &lt;div class="abhead"&gt;Pain Suppression&lt;/div&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  
      &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;br&gt;&lt;br&gt;
  
    &lt;!-- disciples --&gt;
  
    &lt;div class="disciple"&gt;
      &lt;div class="head3"&gt;DISCIPLES&lt;/div&gt;
      &lt;img src="img/genos.png" class="genos"&gt;
      &lt;div class="h3"&gt;GENOS&lt;/div&gt;
      &lt;div class="discp"&gt; The deuteragonist of One-Punch Man. He is a 19-year-old cyborg and the disciple of Saitama. He is always aiming to become more powerful and fights for justice. Under the Hero Association, he is given the name Demon Cyborg and is currently S-Class
        Rank 14.&lt;/div&gt;
    &lt;/div&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>