Why does my footer text align?

html…

<li><a href="">Bla helt ned..</a></li>

      </ul>

    </nav>

    <header>

      <div class="bg">

        <div class="content">

          <div class="kolum">

            <div class="atas">

              <img src="/IMG/ICO/planet1.png" />

            </div>

            <div class="tengah">

              <h2>Quest 1</h2>

            </div>

            <div class="bawah">

              <p>

                Oppgave 1: Innholdsinformasjon til oppgaven. en settning som

                forklarer hva oppgaven handler om. legg til dataspårk eller joke

                idk

              </p>

            </div>

          </div>

          <div class="kolum">

            <div class="atas">

              <img src="/IMG/ICO/planet2.png" />

            </div>

            <div class="tengah">

              <h2>Quest 2</h2>

            </div>

            <div class="bawah">

              <p>

                Oppgave 2: Innholdsinformasjon til oppgaven. en settning som

                forklarer hva oppgaven handler om. legg til dataspårk eller joke

                idk

              </p>

            </div>

          </div>

          <div class="kolum">

            <div class="atas">

              <img src="/IMG/ICO/planet3.png" />

            </div>

            <div class="tengah">

              <h2>Quest 3</h2>

            </div>

            <div class="bawah">

              <p>

                Oppgave 3: Innholdsinformasjon til oppgaven. en settning som

                forklarer hva oppgaven handler om. legg til dataspårk eller joke

                idk

              </p>

            </div>

          </div>

        </div>

      </div>

    </header>

    <footer>

      <div class="bgf">

        <div class="contentf">

          <div class="atas">

            <form action="home.html">

              <input type="search" placeholder="Search..." />

            </form>

          </div>

          <div id="bawah">

            <div class="title">

              <h1>Innholdsfortegnelse.</h1>

            </div>

            <div class="paragraf">

              <p>

                random text: her kan du legge inn hva du vil. tror jeg burde

                legge til mere tekst bare for å se hvordan det vil se ut om jeg

                fyller det litt ut bla bla bla ...........

              </p>

            </div>

          </div>

        </div>

      </div>

    </footer>

  </body>

</html>

STYLE…

footer {

  background: #fff;

  height: 100vh;

  width: 100%;

  position: relative;

}

.bgf {

  width: 100%;

  height: 100vh;

  /*lage bakgrunnen mindre skarp*/

  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)),

    url(/IMG/bgf.gif);

  /*bakgrunn*/

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-size: cover;

  display: flex;

  justify-content: center;

  align-items: center;

}

.contentf {

  width: 90%;

  height: 70%;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-wrap: wrap;

}

.contentf .atas {

  height: 45%;

  width: 100%;

}

/**/

.contentf .bawah {

  height: 65%;

  width: 100%;

  overflow: hidden;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-wrap: wrap;

}

/**/

form {

  width: 100%;

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: flex-end;

}

/**/

input[type="search"] {

  border-radius: 50px;

  padding: 2vh 3vh 2vh 3vh;

  outline: none;

  border: none;

  color: #333;

  width: 50%;

  height: 10vh;

  font-size: 1.5rem;

  opacity: 0.7;

}

/**/

.title {

  overflow: hidden;

  height: 35%;

  width: 60%;

  color: #f0f0f0;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 1.3rem;

}

/**/

.paragraf {

  overflow: hidden;

  height: 60%;

  width: 60%;

  color: white;

  display: flex;

  text-align: center;

  align-content: center;

  justify-items: center;

  align-items: center;

  font-size: 1.2rem;

}

@bluechips what is the issue?
you may edit your post following this picture:

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

@bluechips Not sure exactly what you mean by “Why does my footer text align?” Can you give us more information about what you are expecting to see vs. what is happening?

Thank you.

1 Like