/* Portal Aluno */
#header-menu{
position: relative;
margin: 0 auto;
border:0px;
bottom: 800px;
left: 10%;
}
#C-icon{
position:relative;
border:0px;
margin: 0px;
padding: 0;
right: 71%;
top: 7%;
}
#fb-icon{
position: relative;
border:0px;
margin-left: 50px;
padding: 0;
right: 80%;
top: 9%;
}
#ambiente-icon{
position: relative;
border:0px;
margin-right:100px;
margin-left: 0;
padding: 0;
left: -15%;
bottom: 41%;
}
#youtube-icon{
position: relative;
border:0px;
margin-right: 0;
padding: 0;
bottom: 41%;
right: 20%;
}
#sair-icon{
position: relative;
border:0px;
margin-left:0;
padding: 0;
bottom: 41%;
left: 55%;
}
#header-icons li {
border:0px;
list-style-type: none;
display: inline-block;
position: relative;
bottom: 137px;
left: 130px;
}
/*#header-icons li{
display: inline-block;
}*/
@keyframes space01 {
/* line 163, ../scss/main.scss */
0% {
bottom: 720px;
}
/* line 166, ../scss/main.scss */
50% {
bottom: 751px;
}
/* line 169, ../scss/main.scss */
100% {
bottom: 720px;
}
}
#space{
position: relative;
bottom: 170px;
border:0px;
}
#space-ship{
position: relative;
border:0px;
margin: 0;
padding: 0;
bottom: 750px;
left: 150px;
animation-name:space01;
animation-duration: 2.2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
width: 20%;
height: 20%;
}
.menu-a{
padding: 0;
border:0px;
margin-right: 0;
position: relative;
right:0
}
#fred-portal{
position: relative;
margin: 0;
border:0px;
padding: 0;
bottom: 780px;
left: 500px;
width: 10%;
height: 10%;
}
#owl-portal{
position: relative;
margin: 0;
border:0px;
padding: 0;
bottom: 850px;
left: 950px;
width: 10%;
height: 10%;
}
#portal-sun{
position: relative;
border:0px;
width: 20%;
height: 20%;
bottom: 950px;
left: 550px;
}For organization of the content I used divs, but when repositioning the elements via css, when using the chrome inspect and mozzila I realized that the divs are totally confusing, they did not follow their contents taking up spaces that did not exist while the content is in a totally different place . Has anyone had a similar problem?
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Portal do Aluno</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="icon" type="image/png" href="img/icon_conecturma.png" >
</head>
<body>
<div id="portal_bg" >
<img src="img/tela_ambiente-do-aluno.png" class="img-fluid" alt="Responsive image">
<div id="header-menu">
<div>
<header>
<img src="img/header-menu-1.png" class="img-fluid" alt="Responsive image">
<ul id="header-icons">
<li>
<a class="menu-a" href="#">
<img src="img/C-icon.png" id="C-icon" class="img-fluid" alt="Responsive image">
</a>
</li>
<li>
<a class="menu-a" href="#">
<img src="img/ambiente-icon.png" id="ambiente-icon" class="img-fluid" alt="Responsive image">
</a>
</li>
<li>
<a class="menu-a" href="#">
<img src="img/facebook-icon.png" id="fb-icon" class="img-fluid" alt="Responsive image">
</a>
</li>
<li>
<a class="menu-a" href="#">
<img src="img/youtube-icon.png" id="youtube-icon" class="img-fluid" alt="Responsive image">
</a>
</li>
<li>
<a class="menu-a" href="#">
<img src="img/sair-icon.png" id="sair-icon" class="img-fluid" alt="Responsive image">
</a>
</li>
</ul>
</header>
</div>
</div>
<div id="owl-image">
<img src="img/owl-portal.png" id="owl-portal">
</div>
<div id="space" >
<img src="img/portal-sun.png" id="portal-sun">
<img id="fred-portal" src="img/fred-portal.png">
<img src="img/space-ship.png" id="space-ship" class="img-fluid" alt="Responsive image">
</div>
<script type="text/javascript" src="js/javascript.js"></script>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</div>
</body>
</html>