Почему блок накладывается на блок? И как это починить?
HTML CODE:
<html class="hydrated"><head><style>
test{
position: relative;
}
</style>
<meta charset="utf-8"><style data-styles="">ion-icon{visibility:hidden}.hydrated{visibility:inherit}</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link href="static/style.css" rel="stylesheet" type="text/css">
</head>
<body id="body">
<div id="main">
<div id="topBar">
<h4 style="padding-left: 20px"></h4>
<div class="status online" id="status"></div>
</div>
<div id="content">
<div class="container">
<div id="messages">
<div class="message right"><div class="container"><p> </p><p></p><p class="timeStamp right">14:5</p></div></div><div class="message right"><div class="container"><p> </p><p></p><p class="timeStamp right">14:5</p></div></div><div class="message right"><div class="container"><p> </p><p></p><p class="timeStamp right">14:5</p></div></div><div class="message right"><div class="container"><p> </p><p></p><p class="timeStamp right">14:5</p></div></div><div class="message right"><div class="container"><p> </p><p></p><p class="timeStamp right">14:5</p></div></div><div class="message right"><div class="container"><p> </p><p></p><p class="timeStamp right">14:5</p></div></div><div class="message right"><div class="container"><p>vf</p><p></p><p class="timeStamp right">14:5</p></div></div><div class="message right"><div class="container"><p>v</p><p></p><p class="timeStamp right">14:5</p></div></div><div class="message right"><div class="container"><p>d</p><p></p><p class="timeStamp right">14:5</p></div></div><div class="message right"><div class="container"><p>Vd</p><p></p><p class="timeStamp right">14:5</p></div></div><div class="message right"><div class="container"><p>v</p><p></p><p class="timeStamp right">14:5</p></div></div><div class="message right"><div class="container"><p>c</p><p></p><p class="timeStamp right">14:5</p></div></div><div class="message right"><div class="container"><p>vc</p><p></p><p class="timeStamp right">14:5</p></div></div><div class="message right"><div class="container"><p>v</p><p></p><p class="timeStamp right">14:5</p></div></div><div class="message right"><div class="container"><p>c</p><p></p><p class="timeStamp right">14:5</p></div></div></div>
<div class="bumper"></div>
<div id="input" class="test">
<input placeholder="Текст" id="message">
<button onclick="sendMessage()">
<ion-icon name="send" role="img" class="md hydrated" aria-label="send"></ion-icon>
</button>
</div>
</div>
</div>
</div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule="" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script src="https://cdn.socket.io/4.4.0/socket.io.min.js" integrity="sha384-1fOn6VtTq3PWwfsOrk45LnYcGosJwzMHv+Xh/Jx5303FVOXzEnw0EpLv30mtjmlj" crossorigin="anonymous"></script>
<script src="static/chat.js"></script>
<iframe id="ms-iframe" class="no-visible pos-bottom-left" src="chrome-extension://hfgbpkkdodfihabamnkhoaeamkdhnoec/app/ui-web/ui-web.html?protocol=https:&domain=sever-for-map-game.agzamikail.repl.co" style="width: 0px; height: 0px;"></iframe><link rel="stylesheet" href="chrome-extension://hfgbpkkdodfihabamnkhoaeamkdhnoec/app/site/site.min.css"></body></html>
CSS code
https://pastebin.com/B7A42wnK 
Простой
если это убрать или поменять на ваш код будет это выглядеть так и это не красиво 
