Good afternoon. How can I make items to be in the same location regardless of the screen that is 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>