Home>
I want to achieve

I am practicing copying coding.
I want other elements to fit inside the body.

Problem, error message

As usual, I intend to put all the elements inside the body, but for some reason other elements deviate from the range of the body. .. The width is 100%.
The display of the developer tools is as follows.
] (6150fff0f5b501131cc7dab29016acca.png)

<! DOCTYPE html><html><head><meta charset = "UTF-8"><meta name = "description" content = ""><meta name = "author" content = ""><meta name = "viewport" content = "width = device-width, initial-scale = 1.0"><link rel = "stylesheet" href = "responsive.css"><link rel = "stylesheet" href = "style.css"><title>Collerfl-clover</title><link rel = "shortcut icon" href = ""></head><body><header>                      <ul>      <li>Information</li>      <li>Gourmet</li>      <li>Contact</li>    </ul>     </header>                          
  <main>    <section>         Information         <ul>        <li><time datetime = "2020.08.20">2020.08.20</time><p>"God of the Web" video UP!</p></li>        <li><time datetime = "2020.08.17">2020.08.17</time><p>"God of the Web" video UP!</p></li>        <li><time date time = "2020.08.08">2020.08.08</time><p>Notice of summer holidays</p></li>        <li><time datetime = "2020.08.05">2020.08.05</time><p>The site has opened!</p></li>      </ul>    </section>
      <section>         Gourmet                         <figure>                          </figure>                                               Tomigaya Terrace                 <ul>                <li>Shibuya</li>                <li>Yoyogi Park</li>                <li>Yoyogi-Hachiman</li>              </ul>                                          <p>Chicken paella</p>                                  <figure>                          </figure>                                               Bonjorina                 <ul>                <li>On the pond</li>                <li>Shimokitazawa</li>              </ul>                                          <p>Italian lunch</p>          
                        <figure>            </figure>                                               Yangshu Merchant                 <ul>                <li>Shibuya Center Gai</li>              </ul>                                          <p>Surah Tanmen</p>                                  <figure>                          </figure>                                               Curry restaurant heart                 <ul>                <li>Shimokitazawa</li>              </ul>                                          <p>Bone-in chicken soup curry</p>                                  <figure>                          </figure>                                               Hakata Shokudo                 <ul>                <li>Shibuya</li>                <li>Shinsen</li>              </ul>                                          <p>Hakata Ramen</p>                                  <figure>                          </figure>                                                                 UeCONA                       <ul>                      <li>Shibuya</li>                      <li>Dogenzaka</li>                    </ul>                                                      <p>Chicago Pizza</p>                </section></main><footer>  <ul>    <li>Company</li>    <li>Service</li>    <li>Portfolio</li>    <li>Blog</li>    <li>Contact</li>  </ul>          <p>Copyright © Colorful Clover, inc. All Rights Reserved.</P>



  </footer>
</body></html>
@charset = "UTF-8"
/ *
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark --http://richclarkdesign.com
Twitter: @rich_clark
* /
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
nav ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote: before, blockquote: after,
q: before, q: after {
    content:'';
    content: none;
}
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
/ * change colors to suit your needs * /
ins {
    background-color: # ff9;
    color: # 000;
    text-decoration: none;
}
/ * change colors to suit your needs * /
mark {
    background-color: # ff9;
    color: # 000;
    font-style: italic;
    font-weight: bold;
}
del {
    text-decoration: line-through;
}
abbr [title],

 dfn [title] {
    border-bottom: 1px dotted;
    cursor: help;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/ * change border color to suit your needs * /
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}
input, select {
    vertical-align: middle;
}
/ * END Reset CSS * /
body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}header {
  height: 60px;
  width: 100%;
  position: fixed;
  background-color: white;
}
header .container {
  width: 100%;
  position: relative;
}
header .container h1 {
  display: inline-block;
  height: 30px;
  width: 200px;
  margin: 0%;
  position: absolute;
  top: 20px;
  left: 15px;
}
header .container h1 img {
  width: 100%;
}
header .container ul {
  display: inline-block;
  list-style: none;
  margin: 0%;
  padding: 0%;
  float: right;
}
div # key-visual {
  width: 100%;
  padding-top: 60px;
}
 # key-visual img {
   display: block;
    width: 100%;
    margin: 0 auto;
}
main {
  width: 100%;
  margin: 0 auto;
}
.information h2 {
  width: 100%;
  padding: 10px 12px;
  margin: 0%;
  background-color: # B99566;
  color: white;
  font-weight: normal;
  font-size: inherit;
}
.information ul li :: nth-child (even) {
  background-color: # ff9;
}
.information .brown {
  background-color: # F5F3F0;
}
.information p {
  margin: 0;
  font-size: 14px;
}
.information p :: before {
  content: "▶";
}
.information ul {
  width: 100%;
  list-style: none;
  padding-inline-start: 0%;
  margin: 0px;
}
.information li {
  padding: 5px 10px;
  line-height: 1.7;
}
.information ul li time {
  display: block;
  font-size: 10px;
}

body {
  margin: 0%;
  width: 100%;
}