Items on the screen dynamically, regardless of screen size

Question

Good afternoon. How can I get items to be in the same place regardless of the screen used for the display? I use a 14 inch screen, when it displays the screen on a larger screen, the items are misaligned.

#tudo {
  margin: 50px 0px 0px 23px;
}

.position_box {
  position: relative;
  width: 31%;
  height: 10%;
  background-color: #D9D9F3;
  float: left;
  margin-left: 20px;
  margin-bottom: 20px;
}

.estilo:hover {
  -webkit-transform: scale(1.15);
  -ms-transform: scale(1.15);
  transform: scale(1.15);
  -webkit-transition: 0.5s;
  z-index: 1;
  /*Faz o elemento ficar a cima dos outros*/
}

a:link,
a:visited,
a:active {
  text-decoration: none;
  color: #000;
}


/*a:hover {
            text-decoration: none;
            font-size: 113%;
            color: #000;
        }*/

.titulo {
  text-align: center;
  font-weight: bold;
  font-size: 14px;
}

.estilo_tab {
  position: absolute;
  padding-right: -30px;
  width: -60%;
  border-color: #000;
}

table td {
  font-size: 14.5px;
}

<div id="tudo">
  <a href="#">
    <div class="position_box estilo">
      <span class="titulo">
                <p>Teste</p>
            </span>
      <table>
        <p>Info</p>
        <p>Info</p>
        <p>Info</p>
      </table>
    </div>
  </a>

  <a href="#">
    <div class="position_box estilo">
      <span class="titulo">
                <p>Teste</p>
            </span>
      <table>
        <p>Info</p>
        <p>Info</p>
        <p>Info</p>
      </table>
    </div>
  </a>

  <a href="#">
    <div class="position_box estilo">
      <span class="titulo">
                <p>Teste</p>
            </span>
      <table>
        <p>Info</p>
        <p>Info</p>
        <p>Info</p>
      </table>
    </div>
  </a>
</div>