How to set footer under section? - html

Question

I have a problem with my footer. My footer is under the right section but I want that it will be under the main section on the full-width container.
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
background-color: #1F0057;
}
.container {
width: 1400px;
margin-left: 15%;
float: left;
}
nav ul li img {
width: 25px;
padding-left: 5%;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline;
}
nav ul li a {
vertical-align: middle;
padding-left: 5px;
color: #DAA520;
text-decoration: none;
text-transform: uppercase;
font-size: 1.2rem;
/* border: 1px solid yellow; */
}
nav {
background-color: #1F0057;
width: 100%;
height: 1em;
/* border: 1px solid yellow; */
}
.header {
font-size: 4rem;
color: white;
background-color: rgb(220, 189, 222);
width: 100%;
}
.title {
text-align: center;
color: #696969;
}
main article section {
float: left;
height: 60vh;
}
#first {
/* background-image: url(); */
background-image: url("gimp/cpu1.png");
/* usun "color" */
color: white;
width: 20%;
/* width: 300px; */
}
#second {
padding: 2%;
width: 60%;
height: auto;
background-color: #fff;
background-color: #4800CF;
/* width: 900px; */
}
#third {
width: 16%;
background-color: #5600F5;
height: auto;
/* width: 188px; */
}
main article section header {
font-size: 1.8em;
font-weight: bold;
padding: 2%;
}
main article section figure {
font-size: 1.2rem;
font-weight: bold;
margin-top: 3%;
box-shadow: 2px 2px 5px black;
}
main article section figcaption {
font-size: 1.1rem;
text-indent: 1.5em;
padding-top: 2.5%;
text-align: justify;
}
.secondmainmargin {
/* margin: 2%; */
}
.footer {
background-color: white;
font-family: 'Robocot';
font-size: 1.4rem;
text-align: center;
color: #fff;
float: right;
}
.link {
padding: 2%;
}
<div class="container">
<header class="header">
<div class="title">
Podstawowe podzespoły i parametry sprzętu komputerowego
</div>
<nav class="navbar">
<ul>
<li><img src="img/house.png" alt="domek"></li>
<li>Obudowa</li>
<!-- !!!!!przy "strony nie może być "/" czyli "/strony.obudowa.html"!!!!! -->
<li>Płyta główna</li>
<li>Procesor</li>
<li>Karty rozszerzeń</li>
<li>Pamięć Operacyjna</li>
<li>Pamięci masowe</li>
<li>Zasilacz</li>
<li>Inne</li>
</nav>
</header>
<main class="main">
<article>
<section id="first">
<img src="gimp/cpu1.png" alt="procesor" width="100%;">
</section>
<section id="second">
<header>
Nagłówek sekcji
</header>
<div class="secondmainmargin">
<figure>Podtytuł pierwszy</figure>
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut dolore laborum explicabo beatae dignissimos consectetur, asperiores quod, culpa velit expedita vitae, id hic voluptatem soluta eius alias. Animi sequi deserunt dolorem incidunt iure laudantium
laborum nemo quia ullam blanditiis, voluptatem ea a odit quae, repellendus dicta consequuntur provident ab exercitationem itaque molestias, dolor. Et, ipsa, iusto. Deserunt labore provident ad adipisci sed aliquid natus nihil.
</figcaption>
<figure>Podtytuł drugi</figure>
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos modi laborum repudiandae error temporibus ullam consectetur in molestiae exercitationem quos, expedita cum, odit voluptatum quod illo vitae. Dolorum aperiam unde ducimus maxime aut
iusto distinctio ipsum nisi eveniet illo atque tempore, eius error ex, cupiditate! Provident doloribus voluptatibus dignissimos, sed!
</figcaption>
<figure>Podtytuł trzeci</figure>
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea facilis ducimus beatae doloribus possimus fugiat iste aliquid, laudantium ab omnis veniam porro nemo explicabo. Inventore totam consequuntur expedita, distinctio exercitationem, eaque sint accusantium
libero voluptas sunt eligendi. Dolorum enim, consectetur perferendis veritatis impedit adipisci quo optio maiores odit accusantium tempora eaque blanditiis explicabo eligendi nam dolore placeat natus pariatur?dawdawdadawd Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Amet, eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum ipsa pariatur a, sequi provident id dolor cupiditate dolorum consectetur, ea aliquid sint nesciunt nobis perspiciatis vitae
deserunt, molestiae odit fugit. Tempore quae natus enim reprehenderit aspernatur ratione illo neque assumenda, beatae nihil, ipsa incidunt minima, qui? Delectus animi velit quam distinctio est rem, itaque tempore placeat odio tenetur ipsam
iure consequuntur ex dolorum nulla sunt provident quibusdam harum fugiat et. Ex praesentium sunt, est qui distinctio. Laboriosam quo molestias neque numquam autem suscipit impedit, quaerat optio dolores veritatis sint sequi dolorem necessitatibus
molestiae, ex, incidunt modi porro eius natus perspiciatis!
</figcaption>
</div>
</section>
<section id="third">
<div class="link">
<header>Linki</div>
</header>
</section>
</article>
</main>
<footer class="footer">
Made by: Filip
</footer>
</div>
code with css: https://codepen.io/FilipoV/pen/jOyyNxR

Answer 1

add this to your .footer-class:
.footer{
display:block;
clear:both;
}
and remove
float:right;