如何在部分下设置页脚？

Question

我的页脚有问题。我的页脚位于右侧部分下方，但我希望它位于全宽容器的主要部分下方。

* {
  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><a href="strony/Obudowa.html">Obudowa</a></li>
        <!--  !!!!!przy "strony nie może być "/" czyli "/strony.obudowa.html"!!!!! -->
        <li><a href="#">Płyta główna</a></li>
        <li><a href="#">Procesor</a></li>
        <li><a href="#">Karty rozszerzeń</a></li>
        <li><a href="#">Pamięć Operacyjna</a></li>
        <li><a href="#">Pamięci masowe</a></li>
        <li><a href="#">Zasilacz</a></li>
        <li><a href="#">Inne</a></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>

带有 css 的代码：https://codepen.io/FilipoV/pen/jOyyNxR

Answer 1

将此添加到您的 .footer-class：

.footer{
display:block;
clear:both;
}

并删除

float:right;