When you zoom in on the page, some elements do not "wrap around" correctly and overlap other elements. I am using as an option for layout organization the flex-box , since it was the only one with which I could align some elements as I wanted.
@font-face {
font-family: open_sansregular;
src: url(Fonts/open-sans.regular.ttf);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: open_sansbold;
src: url(Fonts/open-sans.bold.ttf);
font-weight: normal;
font-style: normal;
}
body {
margin: 0;
}
.container-top {
display: flex;
height: 40px;
background-color: #1a75ff;
align-items: center;
justify-content: center;
}
.guide {
display: flex;
flex-wrap: wrap;
width: 70%;
color: white;
}
.align-guide {
padding-right: 15px;
font-family: arial;
font-size: 65%;
}
.container-banner {
display: flex;
height: 130px;
flex-wrap: wrap;
max-height: 180px;
background-color: #1a75ff;
align-items: center;
justify-content: center;
}
.container-banner-align {
display: flex;
flex-wrap: wrap;
width: 70%;
max-height: 130px;
background-color: #1a75ff;
}
.container-description-aglin {
display: flex;
flex-direction: column;
flex-wrap: wrap;
flex: 0 0 60%;
width: 60%;
color: white;
}
.main-menu {
display: flex;
flex-wrap: wrap;
height: 25px;
background-color: grey;
align-items: center;
justify-content: center;
}
.main-menu-items {
display: flex;
flex-wrap: wrap;
width: 70%;
}
.main-menu-items a:hover {
background-color: #66a3ff;
}
.frst {
text-decoration: none;
color: white;
margin: 0 35px 0 0;
font-family: open_sansregular;
font-size: 75%;
}
.scnd {
padding: 0 15px 0 15px;
text-decoration: none;
color: black;
font-family: open_sansregular;
font-size: 65%;
}
.container-less-menu {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-top: 30px;
}
.container-less-menu-items {
display: flex;
flex-wrap: wrap;
flex-direction: row;
width: 70%;
}
.container-less-menu-main-item {
display: flex;
flex-wrap: wrap;
width: 20%;
background-image: url("Images/emdestaque.png");
background-repeat: no-repeat;
background-position: right center;
}
.container-side-menu {
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 15%;
margin-left: 15%;
}
.title-side-menu {
font-family: open_sansregular;
font-size: 85%;
}
.item-side-menu {
font-family: open_sansregular;
font-size: 85%;
padding-top: 6px;
padding-bottom: 6px;
}
.container-side-menu-1 {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
#eb {
margin-top: 15px;
font-size: 90%;
font-family: open_sansregular;
}
#sigla {
margin: 0;
font-family: open_sansbold;
}
#om {
font-family: open_sansregular;
}
#less-menu-main-item {
background-color: rgb(114, 115, 118);
color: white;
font-family: open_sansregular;
font-size: 65%;
border-radius: 8px;
width: 50%;
padding-left: 25%;
padding-right: 20%;
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<link rel="stylesheet" type="text/css" href="xintrastyle.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<title>Intranet</title>
<body>
<div class="container-top">
<div class="guide">
<a class="align-guide">Ir para o conteúdo 1</a>
<a class="align-guide">Ir para o menu 2</a>
<a class="align-guide">Ir para busca 3</a>
<a class="align-guide">Ir para o rodapé 4</a>
</div>
</div>
<div class="container-banner">
<div class="container-banner-align">
<a href="https://10.133.106.2/" target="_blank"><img src="images/distintivo.png" style="width:95px;height:118px;margin:0;" alt="distintivo"></a>
<div class="container-description-aglin">
<span id="eb">elemento que sobrepõe</span>
<h1 id="sigla">elemento que sobrepõe ao dar zoom</h1>
<span id="om">elementoque que sobrepõe ao dar zoom</span>
</div>
</div>
</div>
<div class="main-menu">
<div class="main-menu-items">
<a class="frst" href="http://10.133.106.3/" target="_blank">Protocolos</a>
<a class="frst" href="http://10.133.106.4/" target="_blank">Boletins</a>
<a class="frst" href="nãodefinido" target="_blank">E-mail</a>
<a class="frst" >BI</a>
<a class="frst">Contato</a>
</div>
</div>
<div class="container-less-menu">
<div class="container-less-menu-items">
<div class="container-less-menu-main-item">
<span id="less-menu-main-item">Principal</span>
</div>
<a href="nãodefinido" class="scnd" target="_blank">Sobre</a>
<a href="nãodefinido" class="scnd" target="_blank">Antecessores</a>
<a href="nãodefinido" class="scnd" target="_blank">Grupo</a>
</div>
</div>
<div class="container-side-menu">
<div class="container-side-menu-1">
<h5 class="title-side-menu">tópico</h5>
<a class="item-side-menu">item1</a>
<a class="item-side-menu">item2</a>
<a class="item-side-menu">item3</a>
<a class="item-side-menu">item4</a>
<a class="item-side-menu">item5</a>
<a class="item-side-menu">item6</a>
<a class="item-side-menu">item7</a>
</div>
<div class="container-side-menu-2">
<h5 class="title-side-menu">tópico</h5>
<a class="item-side-menu">item1</a>
<a class="item-side-menu">item2</a>
<a class="item-side-menu">item3</a>
</div>
<div class="container-side-menu-3">
<h5 class="title-side-menu">
</div>
</body>
</html>
First of all, I apologize. I am new to the site and also in html and css. But it is as if they were in the image, it seems that there is no elemental space when zooming which ends up making it superimpose another.