Home>

About "Let's make a footer" of "HTML&CSS Dojo Course Beginner's Edition" of Progate.

Before creating the footer, the position of the send button did not shift, but after creating it, it shifts for some reason, and the length under the footer is also insufficient.

I don't know the solution because I couldn't find any significant changes in the answer.
How do you get the book tail?

Below is the code I wrote. It is written in HTML and CSS.
Since i am a beginner, the code may be difficult to read, but please forgive me.

Postscript: We will post the actual image.

<! DOCTYPE html><html><head><meta charset = "UTF-8"><meta name = "viewport" content = "width = device-width, initial-scale = 1.0"><link rel = "stylesheet" href = "stylesheet.css"><title>Dojo 1</title></head><body><header>         Progate     <ul>    <li>What is programming?</Li>    <li>Lessons you can learn</li>    <li>Contact</li>  </ul>  </header>       HELLO WORLD<span>.</span>    Welcome to the world of programming        Lessons you can learn   <ul>  <li>            <p>HTML&CSS</p>  </li>  <li>            <p>        PHP
      </p>  </li>  <li>            <p>        Ruby
      </p>  </li>  <li>            <p>        Swift
      </p>  </li></ul>       Inquiries       <p>Email address (required)</p><input type = "text"><p>Inquiry content (required)</p><textarea></textarea><p>* Please be sure to fill in the required items</p><input type = "submit" value = "submit">    <footer>   Progate   <ul>  <li>Company Profile</li>  <li>Adopt</li>  <li>Contact</li></ul></footer></body></html>
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p,
form, input, div {
  margin: 0;
  padding: 0;
}
body {
  font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
}
li {
  list-style: none;
}
header {
  background-color: # 26d0c9;
  height: 90px;
  color: white;
}
header li {
  float: left;
  padding: 33px 20px;
}
.logo {
  font-size: 36px;padding: 20px 40px;
  float: left;
}
h1 {
  font-size: 140px;
}
h2 {
  font-size: 60px;
}
span {
  color: red;
}
.contents {
  padding: 100px 80px;
}
h3 {
  font-size: 28px;
  border-bottom: solid 2px # dee7de;
  padding-bottom: 15px;
}
.lessons li {
  float: left;
  padding-top: 50px;
  display: inline-block;
}
.lessons h3 {
  padding-top: 100px;
}
.lesson {
  padding-right: 40px;
  height: 500px;
}
.lesson p {
  font-size: 24px;
  padding-top: 30px;
}
.lessons {
  display: inline-block;
}
.contact p {
  padding-bottom: 10px;
}
.form {
  padding: 20px;
  margin-bottom: 30px;
  width: 400px;
  border: solid 1px # dee7de;
}
.input {
  display: inline-block;
  padding-top: 50px;
}
.btn {
  font-size: 18px;
  display: inline-block;
  color: # 889eab;
  background-color: # dee7de;
}
footer {
  background-color: # 2f5167;
  height: 120px;
  padding: 40px;
  color: white;
}
.footer-logo {
  font-size: 32px;
  float: left;
}
footer ul {
  float: right;
}
footer li {
  padding-bottom: 20px;
}


Answer code

<! DOCTYPE html><html><head><meta charset = "utf-8"><title>Progate</title><link rel = "stylesheet" href = "stylesheet.css"></head><body><!-Start writing HTML from here->         Progate             <ul>      <li>What is programming?</Li>      <li>Lessons you can learn</li>      <li>Contact</li>    </ul>                           HELLO WORLD<span>.</span>        Welcome to the world of programming                      Lessons you can learn                           <p>HTML&CSS</p>                        <p>PHP</p>                                <p>Ruby</p>                                <p>Swift</p>                           Inquiries       <p>Email address (required)</p>    <input>    <p>Inquiry content (required)</p>    <textarea></textarea>    <p>* Please be sure to enter the required items</p>    <input type = "submit" value = "submit">        </body></html>
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p,
form, input, div {
  margin: 0;
  padding: 0;
}
body {
  font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
}
li {
  list-style: none;
}

/ * Write CSS from here * /
.header {
  background-color: # 26d0c9;
  color: #fff;
  height: 90px;
}
.header-logo {
  float: left;
  font-size: 36px;
  padding: 20px 40px;
}
.header-list {
  float: left;
}
.header-list li {
  float: left;
  padding: 33px 20px;
}
.main {
  padding: 100px 80px;
}
.copy-container h1 {
  font-size: 140px;
}
.copy-container h2 {
  font-size: 60px;
}
.copy-container span {
  color: # ff4a4a;
}
.contents {
  height: 500px;
  margin-top: 100px;
}
.section-title {
  border-bottom: 2px solid # dee7ec;
  font-size: 28px;
  padding-bottom: 15px;
  margin-bottom: 50px;
}
.contents-item {
  float: left;
  margin-right: 40px;
}
.contents-item p {
  font-size: 24px;
  margin-top: 30px;
}
.contact-form {
  padding-top: 100px;
}
input, textarea {
  width: 400px;
  margin-top: 10px;
  margin-bottom: 30px;
  padding: 20px;
  font-size: 18px;
  border: 1px solid # dee7ec;
}
.contact-submit {
  background-color: # dee7ec;
  color: # 889eab;
}