My footer goes into the whole page in the mobile view. You can see it when you resize the site to mobile size at the calendar section where the single days are colored grey by the footer
I have tried playing with padding around in the media querys for the calendar and footer, changing heights and margins.. nothing worked so far
<section id="Kalendar">
<div id="calendar-wrap">
<h1 id="calendarhead">Kalendar - Juli 2019</h1>
<div id="calendar">
<ul class="weekdays">
<li>Sonntag</li>
<li>Montag</li>
<li>Dienstag</li>
<li>Mittwoch</li>
<li>Donnerstag</li>
<li>Freitag</li>
<li>Samstag</li>
</ul>
<!-- Days from previous month -->
<ul class="days">
<li class="day other-month">
<div class="date">27</div>
</li>
<li class="day other-month">
<div class="date">28</div>
</li>
<li class="day other-month">
<div class="date">29</div>
</li>
<li class="day other-month">
<div class="date">30</div>
</li>
<li class="day other-month">
<div class="date">31</div>
</li>
<!-- Days in current month -->
<li class="day">
<div class="date">1</div>
<div class="event">
<div class="event-desc">
Hip-Hop-Dance Workshop
</div>
<div class="event-time">
11:00-15:30 Uhr
</div>
<div class="event-desc">
Openair-Kino
</div>
<div class="event-time">
20:00 Uhr
</div>
</div>
</li>
<li class="day">
<div class="date">2</div>
<div class="event">
<div class="event-desc">
Hip-Hop-Dance Workshop
</div>
<div class="event-time">
11:00-15:30 Uhr
</div>
</div>
</li>
</ul>
<!-- Row #2 -->
<ul class="days">
<li class="day">
<div class="date">3</div>
<div class="event">
<div class="event-desc">
Hip-Hop-Dance Workshop
</div>
<div class="event-time">
11:00-15:30 Uhr
</div>
<div class="event-desc">
Dance Battle Hip Hop Streetdance
</div>
<div class="event-time">
16:00 Uhr
</div>
</div>
</li>
<li class="day">
<div class="date">4</div>
</li>
<li class="day">
<div class="date">5</div>
</li>
<li class="day">
<div class="date">6</div>
</li>
<li class="day">
<div class="date">7</div>
</li>
<li class="day">
<div class="date">8</div>
<div class="event">
<div class="event-desc">
Liedtexte Schmiede
</div>
<div class="event-time">
11:30-17:00 Uhr
</div>
<div class="event-desc">
Openair-Kino
</div>
<div class="event-time">
20:00 Uhr
</div>
</div>
</li>
<li class="day">
<div class="date">9</div>
<div class="event">
<div class="event-desc">
Liedtexte Schmiede
</div>
<div class="event-time">
11:30-17:00 Uhr
</div>
</div>
</li>
</ul>
<!-- Row #3 -->
<ul class="days">
<li class="day">
<div class="date">10</div>
</li>
<li class="day">
<div class="date">11</div>
</li>
<li class="day">
<div class="date">12</div>
<div class="event">
<div class="event-desc">
Fotografie-Ausstellungen "Bilder, die bleiben"
</div>
<div class="event-desc">
Konzert Fräulein Tysz & Band
</div>
<div class="event-time">
20:00 Uhr
</div>
</div>
</li>
<li class="day">
<div class="date">13</div>
<div class="event">
<div class="event-desc">
Fotografie-Ausstellungen "Bilder, die bleiben"
</div>
</div>
</li>
<li class="day">
<div class="date">14</div>
<div class="event">
<div class="event-desc">
Fotografie-Ausstellungen "Bilder, die bleiben"
</div>
</div>
</li>
<li class="day">
<div class="date">15</div>
<div class="event">
<div class="event-desc">
Kompaktkurs: Videodreh und Schnitt
</div>
<div class="event-time">
11:00-15:00 Uhr
</div>
<div class="event-desc">
Openair-Kino
</div>
<div class="event-time">
20:00 Uhr
</div>
<div class="event-desc">
Fotografie-Ausstellungen "Bilder, die bleiben"
</div>
</div>
</li>
<li class="day">
<div class="date">16</div>
<div class="event">
<div class="event-desc">
Fotografie-Ausstellungen "Bilder, die bleiben"
</div>
</div>
</li>
</ul>
<!-- Row #4 -->
<ul class="days">
<li class="day">
<div class="date">17</div>
<div class="event">
<div class="event-desc">
Kompaktkurs: Videodreh und Schnitt
</div>
<div class="event-time">
11:00-15:00 Uhr
</div>
<div class="event-desc">
Ausflug zum Barfußpark Egestorf
</div>
<div class="event-time">
10-18 Uhr
</div>
<div class="event-desc">
Fotografie-Ausstellungen "Bilder, die bleiben"
</div>
</div>
</li>
<li class="day">
<div class="date">18</div>
<div class="event">
<div class="event-desc">
Kompaktkurs: Videodreh und Schnitt
</div>
<div class="event-time">
11:00-15:00 Uhr
</div>
<div class="event-desc">
Fotografie-Ausstellungen "Bilder, die bleiben"
</div>
</div>
</li>
<li class="day">
<div class="date">19</div>
<div class="event">
<div class="event-desc">
Konzert Monoclub
</div>
<div class="event-time">
20:00 Uhr
</div>
<div class="event-desc">
Fotografie-Ausstellungen "Bilder, die bleiben"
</div>
</div>
</li>
<li class="day">
<div class="date">20</div>
<div class="event">
<div class="event-desc">
Fotografie-Ausstellungen "Bilder, die bleiben"
</div>
</div>
</li>
<li class="day">
<div class="date">21</div>
<div class="event">
<div class="event-desc">
Fotografie-Ausstellungen "Bilder, die bleiben"
</div>
</div>
</li>
<li class="day">
<div class="date">22</div>
<div class="event">
<div class="event-desc">
Kompaktkurs: Videodreh und Schnitt
</div>
<div class="event-time">
11:00-15:00 Uhr
</div>
<div class="event-desc">
Openair-Kino
</div>
<div class="event-time">
20:00 Uhr
</div>
</div>
</li>
<li class="day">
<div class="date">23</div>
</li>
</ul>
<!-- Row #5 -->
<ul class="days">
<li class="day">
<div class="date">24</div>
</li>
<li class="day">
<div class="date">25</div>
<div class="event">
<div class="event-desc">
Kompaktkurs: Videodreh und Schnitt
</div>
<div class="event-time">
11:00-15:00 Uhr
</div>
</div>
</li>
<li class="day">
<div class="date">26</div>
</li>
<li class="day">
<div class="date">27</div>
</li>
<li class="day">
<div class="date">28</div>
</li>
<li class="day">
<div class="date">29</div>
<div class="event">
<div class="event-desc">
Openair-Kino
</div>
<div class="event-time">
20:00 Uhr
</div>
</div>
</li>
<li class="day">
<div class="date">30</div>
</li>
</ul>
<!-- Row #6 -->
<ul class="days">
<li class="day">
<div class="date">31</div>
</li>
<li class="day other-month">
<div class="date">1</div> <!-- Next Month -->
</li>
<li class="day other-month">
<div class="date">2</div>
</li>
<li class="day other-month">
<div class="date">3</div>
</li>
<li class="day other-month">
<div class="date">4</div>
</li>
<li class="day other-month">
<div class="date">5</div>
<div class="event">
<div class="event-desc">
Openair-Kino
</div>
<div class="event-time">
20:00 Uhr
</div>
</div>
</li>
<li class="day other-month">
<div class="date">6</div>
</li>
</ul>
</div><!-- /. calendar -->
</div><!-- /. wrap -->
</section>
</main>
<footer class="footer-distributed">
<div class="footer-left">
<h3>Company<span>logo</span></h3>
<p class="footer-links">
<a class="footera" href="#">Home</a>
·
<a class="footera" href="#">Blog</a>
·
<a class="footera" href="#">Pricing</a>
·
<a class="footera" href="#">About</a>
·
<a class="footera" href="#">Faq</a>
·
<a class="footera" href="#">Contact</a>
</p>
<p class="footer-company-name">Company Name © 2015</p>
</div>
<div class="footer-center">
<div>
<i class="fa fa-map-marker"></i>
<p><span>21 Revolution Street</span> Paris, France</p>
</div>
<div>
<i class="fa fa-phone"></i>
<p>+1 555 123456</p>
</div>
<div>
<i class="fa fa-envelope"></i>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">
<span>About the company</span>
Lorem ipsum dolor sit amet, consectateur adispicing elit. Fusce euismod convallis velit, eu auctor lacus vehicula sit amet.
</p>
<div class="footer-icons">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-github"></i></a>
</div>
</div>
</footer>
jsfiddle: https://jsfiddle.net/L0f42x8d/
float: left on the footer-distributed container prevent it to cover the whole page
.footer-distributed{
background-color: #292c2f;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px sans-serif;
padding: 55px 50px;
margin-top: 80px;
float:left;
}