Между блоками HTML появились какие-то непонятные пробелы, которые я не могу убрать
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div class="t1">
<div class="block_1">
<br>
<span class="name_1">
<h1>Text 1</h1>
</span>
<span class="desc_1">
<h2>Desc 1</h2>
</span>
<br>
</div>
<div class="block_2">
<span class="name_2">
<h1>Test</h1>
</span>
</div>
</div>
</body>
</html>
CSS:
body {
background-color: #515905;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.block_1 {
background-color: rgb(40, 40, 40, 0.8);
position: relative;
width: auto;
height: auto;
margin: auto;
margin-top: 5%;
margin-left: 20%;
margin-right: 20%;
}
.name_1 {
font-family: Roboto;
font-size: 100%;
color: #fff;
text-align: center;
}
.desc_1{
font-family: Roboto;
font-size: 120%;
color: #fff;
text-align: center;
}
.block_2 {
background: rgb(196, 196, 196, 0.8);
position: relative;
width: auto;
height: auto;
margin: auto;
margin-left: 20%;
margin-right: 20%;
}
.name_2 {
font-family: Roboto;
font-size: 100%;
color: #000;
text-align: center;
}
И вот сам пример этих "пробелов". Как сделать так, чтобы этого отступа не было и блоки стояли впритык?