Boa tarde. Como posso fazer para que os itens fiquem no mesmo local independente da tela que for usada para a exibição? Uso uma tela de 14 polegadas, quando exibe a tela em uma tela maior, os itens ficam desalinhados.
#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>