Not sure why these two divs are overlapping? - html

Question

Sorry bit of a newbie, but i'm having this annoying issue where I can't figure out why these two divs are overlapping... I have content behind the second pic that's being covered right now but I want that content to be shown and for the second pic to be displayed normally under it..
heres what I have html:
<main>
<div id="top_head">
<h2>
Gallery
</h2>
</div>
<br>
<div id="canvas">
<div class="gal_block">
<img src="../img/b_sign.jpg" alt="#">
<br>
<h2 class="gal_head">Chill Morning</h2>
<br>
<p class="gal_meta">May 12, 2018 / by nock / Outdoors<p>
<br>
<p class="gal_info"></p>
</div>
<div class="gal_block">
<img src="../img/b_sign.jpg" alt="#">
<br>
<h2 class="gal_head">Chill Morning</h2>
<br>
<p class="gal_meta">May 12, 2018 / by nock / Outdoors<p>
<br>
<p class="gal_info"></p>
</div>
</div>
</main>
And my css:
* {
margin:0;
padding: 0;
}
.clearfix {
clear: both;
}
#container {
margin: 0 auto;
width: 100%;
}
a {
text-decoration: none;
}
header {
width: 100%;
}
#left_header {
float: left;
margin: 5%;
padding:;
width: 20%
}
#left_header h1 {
font-family: 'Pacifico',cursive;
}
header nav {
float: right;
margin: 5%;
width: 35%;
}
header nav ul li {
float: left;
margin-left: 7%;
padding:0;
list-style: none;
font-size: 20px;
font-family: 'Raleway',cursive;
}
header nav ul li a {
color: black;
transition: color 1s;
}
header nav ul li a:hover {
color: gray;
}
main {
}
#top_head h2 {
font-family: 'Source Serif Pro';
font-size: 30px;
text-align: center;
}
/*affects all pages ^^^*/
/*home*/
#img_wall {
width: 82%;
height: 100%;
padding: 7%;
}
#l_big {
padding: 1%;
float: left;
width: 58%;
height: 67%;
}
#l_big img{
width: 100%;
height: 100%;
border-radius: 5px;
}
#r_top {
padding: 1%;
float: left;
width: 38%;
height: 32%;
}
#r_top img {
width: 100%;
height: 100%;
border-radius: 5px;
}
#r_bottom {
padding: 1%;
float: left;
width: 38%;
height: 32%;
}
#r_bottom img {
width: 100%;
height: 100%;
border-radius: 5px;
}
/*home end*/
/*about*/
/*about end*/
/*gallery*/
#canvas {
}
.gal_block {
display: block;
margin: 0 auto;
width: 80%;
height: 70%;
margin-top: 5%;
}
.gal_block img {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
border-radius: 5px;
}
.gal_head {
font-family: 'Source Serif Pro';
font-size: 25px;
text-align: center;
margin-top: 2%;
}
.gal_meta {
font-family: 'Raleway',cursive;
font-size: 12px;
color: gray;
text-align: center;
}
.gal_info {
font-size: 14px;
font-family: Arial;
width: 40%;
margin: 0 auto;
line-height: 1.5;
margin-bottom: 8%;
}
I also have a container over everything that with a width of 100% if that matters..(guessing it doesn't) but img of the issue below
if you look closely you can see the text thats supposed to be not cover..revealing itself when I mess with the zoom on the page...