title: How to set footer under section?
body: <p>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.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    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%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;header class="header"&gt;
      &lt;div class="title"&gt;
        Podstawowe podzespoły i parametry sprzętu komputerowego
      &lt;/div&gt;
      &lt;nav class="navbar"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;img src="img/house.png" alt="domek"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="strony/Obudowa.html"&gt;Obudowa&lt;/a&gt;&lt;/li&gt;
          &lt;!--  !!!!!przy "strony nie może być "/" czyli "/strony.obudowa.html"!!!!! --&gt;
          &lt;li&gt;&lt;a href="#"&gt;Płyta główna&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Procesor&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Karty rozszerzeń&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Pamięć Operacyjna&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Pamięci masowe&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Zasilacz&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Inne&lt;/a&gt;&lt;/li&gt;
      &lt;/nav&gt;
    &lt;/header&gt;
    &lt;main class="main"&gt;
      &lt;article&gt;
        &lt;section id="first"&gt;
          &lt;img src="gimp/cpu1.png" alt="procesor" width="100%;"&gt;
        &lt;/section&gt;
        &lt;section id="second"&gt;
          &lt;header&gt;
            Nagłówek sekcji
          &lt;/header&gt;
          &lt;div class="secondmainmargin"&gt;
            &lt;figure&gt;Podtytuł pierwszy&lt;/figure&gt;
            &lt;figcaption&gt;
              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.
            &lt;/figcaption&gt;
            &lt;figure&gt;Podtytuł drugi&lt;/figure&gt;
            &lt;figcaption&gt;
              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!
            &lt;/figcaption&gt;
            &lt;figure&gt;Podtytuł trzeci&lt;/figure&gt;
            &lt;figcaption&gt;
              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!
            &lt;/figcaption&gt;
          &lt;/div&gt;
        &lt;/section&gt;
        &lt;section id="third"&gt;
          &lt;div class="link"&gt;
            &lt;header&gt;Linki&lt;/div&gt;
          &lt;/header&gt;
        &lt;/section&gt;
      &lt;/article&gt;
    &lt;/main&gt;
  
    &lt;footer class="footer"&gt;
      Made by: Filip
    &lt;/footer&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>code with css: <a href="https://codepen.io/FilipoV/pen/jOyyNxR" rel="nofollow noreferrer">https://codepen.io/FilipoV/pen/jOyyNxR</a></p>