Home>

We are practicing copying coding of the HP top page. (Daytra's free coating practice material)
The goal is to have the top page layout as shown in the image.

Click here for a sample image

The problem i am having

① "What is Daytra?" The right edge of the text on the right side of the image does not align with the right edge of the header.
(2) The "Inquiry" email address is not left-justified.

Click here for our confirmation screen

Corresponding source code
<! DOCTYPE html><html><head><meta charset = "utf-8"><title>practice</title><link rel = "stylesheet" href = "css/stylesheet.css"></head><body><header>             30DAYS trial       <nav>      <ul>        <li>What is Daytra</li>        <li>Course list</li>        <li>Contact us</li>      </ul>    </nav>      </header>                               What is Daytra?                                       <p>Daytra is a programming learning app that you can learn for free, without hesitation, and in a fun way. every day
            You can acquire programming skills in 30 days from inexperienced just by completing the set tasks.</p>        <p>Aim to become a professional web engineer in 30 days, one subject a day!</p>                                             Course list                                         <p>HTML/CSS/Bootstrap</p>                                        <p>HTML/CSS/Javascript/jQuery</p>                                        <p>PHP/Wordpress</p>                                     Contact us       <p>Now, let's start 30 days from today!</p>    <input type = "email" placeholder = "email address"><br>    <input type = "submit" value = "start for free">          <footer>          <p>Copyright (C) 2020 Tokyo Freelance ALL Rights Reserved.</P>      </footer></body></html>
@charset "Shift_JIS";
/ * ============================================
General style
============================================ * /
* {
    margin: 0;padding: 0;/* Reset margin padding for all elements * /
    color: # 325266;/* Text color * /
  box-sizing: border-box;
}
body {
    text-align: center;/* Measures for centering under IE6 * /
  font-family: Segoe UI;
}
ul li {
  list-style: none;
  font-weight: bold;
}
p, a {
  font-size: 1.2em;
  text-decoration: none;
  font-weight: bold;
}

.container {
  width: 1450px;
  margin: 0 auto;
}
h2 {
  font-size: 2em;
  padding: 70px 0;
}
input {
  outline: none;
}

/ * ============================================
header part
============================================ * /
.head {
  display: flex;
  justify-content: space-between;
  height: 100px;
  align-items: center;
}
.head ul {
  display: flex;
  margin-left: auto;
}
.head a {
  margin-right: 50px;
  color: black;
}
/ * ============================================
greeting part
============================================ * /.greeting-contents {
  display: flex;
}
.greeting-contents img {
  width: 50%;
  padding-right: 20px;
}
.greeting-contents p {
  text-align: left;
  padding-left: 20px;
}
/ * ============================================
courses part
============================================ * /
.all-courses {
  display: flex;
}
.course {
  padding: 0 0.5px;
}
.course p {
  text-align: left;
}
.course img {
  width: 80%;
  float: left;
}
/ * ============================================
contact part
============================================ * /
.mail {
  border-radius: 80px;
  display: inline-block;
  padding: 30px 400px;
  outline: none;
  font-size: 1em;
}
.mail :: placeholder {
  text-align: left;
}
.btn {
  background-color: # e47474;
  color: white;
  font-size: 1.5em;
  margin: 50px 0 90px 0;
  padding: 20px 100px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}
/ * ============================================
footer part
============================================ * /
.foot {
  border-top: 1px solid #eee;
}
.foot p {
  padding: 30px 0 90px 0;
  text-align: right;
  color: black;
  font-weight: normal;
}
What I tried

①: Created a class attribute called container as a parent element and specified width.
②: I specified the mail placeholder as "text-align: left".

Supplementary information (FW/tool version, etc.)

The text editor I'm using is Atom.

  • Answer # 1

    Hello.

    >① "What is Daytra?" The right edge of the text on the right side of the image does not align with the right edge of the header.

    I think that the "header" is the header element, but in the code presented, the header element is width: auto, so I think it is the same as the screen size.
    On the other hand, there is also "

    extends beyond the container" and "I created a class attribute called container as the parent element and specified the width", so this does not match the width of the header element.
    It is recommended that you reorganize where you want to match

    .

    When I tried the code provided, the phenomenon that "

    protrudes from the container" was not reproduced.


    >② The "Inquiry" email address is not left-justified.

    Since the placeholder extends to the full width of the input element content, it looks the same whether it is left-justified or right-justified.
    So, why not specify width in the input element?

    In addition, padding: 30px 400px, so please consider reducing the horizontal putting.