Grid Layout pushes Sidebar away

Hello,
I was looking around for a responsive Grid layout and found something. Code will be at the end of the post.
I applied it to one page yet and the problem is that the grid is working fine but the sidebar gets pushed down automatically.

How can I chage that?
https://www.diving-canary-islands.com/tauchen-auf-den-kanaren/fischlexikon/knochenfische-osteichthyes/

Code used:

HTML
<div id=”gridbox”>
<div id=”box”>
<div class=”box3″>Content</div>
</div>
<div id=”box”>
<div class=”box3″>Content</div>
</div>
<div id=”box”>
<div class=”box3″>Content</div>
</div>
>/div>

CSS

#gridbox
{width:100%;
overflow:hidden;
}

#box {
box-sizing:border-box;
float:left;
width: 33.3%;
padding-bottom: 30%;
position:relative;
}
.box3 {
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
overflow:hidden;
}

@media only screen and (max-width : 480px) {
/* Smartphone view: 1 tile */
#box {
width: 100%;
padding-bottom: 100%;
}
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
/* Tablet view: 2 tiles */
#box{
width: 50%;
padding-bottom: 50%;
}
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
/* Small desktop / ipad view: 3 tiles */
#box{
width: 33.3%;
padding-bottom: 33.3%;
}
}