常連

サイトの模写を練習しています。
bodyに左右のマージンを設定しているのですが、
レスポンシブにしたときにメインのイメージだけは画面いっぱいに広がるようにしたい場合、
どのようにしたらよいでしょうか？



```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Write-書くためのテーマ</title>
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>

  <div class="container">
    <div class="title">
      <h1><a class="logo" href="index.html">Write</a></h1>
      <p>書くためのテーマ</p>
    </div>

    <div class="nav">
      <ul>
        <li><a href="">ホーム</a></li>
        <li><a href="">ページ</a></li>
        <li><a href="">タイポグラフィー</a></li>
        <li><a href="">お問い合わせ</a></li>
        
      </ul>
    </div>

    <div class="search-icon">
      <span class="fa fa-search"></span>
    </div>

  </div>

</header>

<main>
  <div class="main-image">
    <img src="img/top.jpg">
    <h1>Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限までは省いたデザインは、あなたの文章を主役にします。</h1>
  </div>

  <div class="wrapper">
    <div class="section">
      <div class="date">
        <p>2018年9月1日</p>
      </div>
      <div class="info">
       <p><a href="">書くためのテーマ</a></p>
       <p>Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</p>
     </div>
   </div>  
    
     <div class="section">
       <div class="date">
         <p>2018年3月5日</p>
       </div>
       <div class="info">
        <p><a href="">画像付きの投稿</a></p>
        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
       </div>
    </div>

     <div class="section">
       <div class="date">
         <p>2018年3月5日</p>
       </div>
       <div class="info">
        <p><a href="">引用付きの投稿</a></p>
        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれ…</p>
       </div>
     </div> 
      
     <div class="section">
       <div class="date">
         <p>2018年3月5日</p>
       </div>
       <div class="info">
        <p><a href="">コメント付きの投稿</a></p>
        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれ…。</p>
      </div>
    </div> 

     <div class="section">
       <div class="date">
         <p>2018年3月3日</p>
       </div>
       <div class="info">
        <p><a href="">吾輩は猫である</a></p>
        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれ…</p>
      </div>
    </div>  

     <div class="section">
       <div class="date">
         <p>2018年9月1日</p>
       </div>
       <div class="info">
        <p><a href="">名前はまだ無い。どこで生れたかとんと見当がつかぬ。</a></p>
        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれ…</p>
      </div>
    </div>  


 </div>

 <div class="page">
  <ul>
    <li class="number"><a href="">1</li></a>
    <li class="number"><a href="">2</li></a>
    <li class="number"><a href="">3</li></a> 
    <li class="number"><a href="">次へ&raquo;</li></a>

  </ul>
</div>


<div class="introduction">

<div class="prof">
  <div class="profile">  
    <img src="img/profile.png">   
      <div class="name">
         <h1><strong>John Doe</strong></h1>
           <ul>
             <li><a href=""><i class="fab fa-twitter fa-fw"></i></a></li>
             <li><a href=""><i class="fab fa-facebook fa-fw"></i></a></li>
             <li><a href=""><i class="fab fa-instagram fa-fw"></i></a></li>
           </ul>
      </div>
 </div>  
    <p>これはプロフィールウィジェットです。ここにはプロフィール画像・名前・自己紹介文・ソーシャルリンク（最大7つ）を設定することができます。</p>
</div>
 

<div class="footer-right">
  <h2>フッター右</h2>
  <p>3つのフッター右ウィジェットエリアはフッターの右側に表示され、使用する数によって幅は自動的に調整されます。1つも使用しない場合は表示されません。</p>
</div>

<div class="post">
  <h2>最近の投稿</h2>
  <ul>
    <li><a href="">書くためのテーマ</a><br>2018年9月1日</li>
    <li><a href="">画像付きの投稿</a><br>2018年3月5日</li>
    <li><a href="">引用付きの投稿</a><br>2018年3月5日</li>
  </ul>
</div>
  
<div class="category">
  <h2>カテゴリー</h2>
  <ul>
    <li><a href="">サンプル投稿</li></a>
    <li><a href="">投稿フォーマット</li></a>
    <li><a href="">普通の投稿</li></a>   
  </ul>
</div>

</div>

  <input type="text" name="sabject" placeholder="検索...">

</main>

<footer>
  <ul>
    <li><a href=""><i class="fab fa-twitter fa-fw"></i></a></li>
    <li><a href=""><i class="fab fa-facebook fa-fw"></i></a></li>
    <li><a href=""><i class="fab fa-instagram fa-fw"></i></a></li>
  </ul>

  <p>Powered by WordPress | Theme: Write by Themegraphy</p>
</footer>

</body>
</html>


```

```CSS
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p, div {
  margin: 0;
  padding: 0;
}

 body { 
 font-family: "Yu Mincho","Hiragino MIncho Pro" ,"serif";
  margin:80px 140px 0 140px;   
}

* {
  box-sizing: border-box;
}

 img {
  max-width: 100%;
  height:auto;
} 

 li { 
  list-style: none;
 } 


a:hover {
  color:#b8860b;
}

p, li {
  color:#77778d;
}

header .container h1 {
  font-size: 40px;
  font-weight: bold;
  height:55px;

}

.logo {
  color:black;
}

header p {
  font-size: 18px;
 
}

header a {
  text-decoration: none;
}

 .nav ul { 
  display:flex;
  width: 450px;
  height: 84px;
  justify-content:space-between;
}



ul li {
  align-self:flex-end;

}

.container  a {
  color:black;
}

 header .container {
  display:flex;
  justify-content: space-between;
 }



 .search-icon span {
   display:block;
   padding-top: 60px;

 }


.main-image {
  margin-top:70px;
}


  main img {
    width:100%; 
  }

  .main-image h1 {
    color: #77778d;
    font-size: 25px;
    line-height: 1.9;
    padding: 85px 0 ;
    font-weight: normal;
    letter-spacing: 1px;
  }

  .wrapper a {
    color:black;
    font-size: 22px;
    font-weight: bold;
    text-decoration: none;

  }

  .section {
    display:flex;
    padding-bottom: 70px;
  }

  .date {
    width: 30%;
  }

  .info {
    width: 70%;
  }

  .info p {
    padding-bottom:20px;
  }


.number .next {
  display: block;
  
}

.page ul {
  text-align: center;
  display:flex;
  justify-content:center;
  
}

.number {
  width:50px;
  line-height:50px;
}

.number a {
  text-decoration: none;
  color: grey;
}

.next {
  width: 85px;
  line-height:50px;
}

.page li {
  border: 1px solid #DDDDDD;
  margin-right: 10px;
}

.page {
  padding-bottom: 100px;
  border-bottom: 1px solid  #DDDDDD;
}

.profile img {
  width:100px;
  height:100px;
  border-radius: 50%;
}

  .name li { 
  display: inline-block;
  width: 30px;
  height:15px;
}  

 .fa-fw {
 font-size: 25px;
 color:silver;
 
}

.fa-fw:hover{
  color: grey;
}


.profile {
  display:flex;
}



.name h1 {
  font-size: 20px;
  font-weight: bold;
  padding: 20px 0 15px 10px;
  
}

.name {
  padding-left: 20px;
}

.introduction {
  display:flex;
  padding-top: 40px;
}

.prof {
  width: 35%;
  padding: 40px 50px 0 0;
}
.footer-right {
  width: 25%;
  padding: 40px 50px 0 0;

}
.post {
  width: 20%;
  padding: 40px 50px 0 0;
}
.category {
  width:20%;
  padding: 40px 50px 0 0;
}

.introduction h2 {
  font-size: 16px;
  font-weight: normal;
}

.post a {
  text-decoration: none;
  border-bottom: 1px solid  #DDDDDD;
  color: #77778d;

}
.category a {
  text-decoration: none;
  border-bottom: 1px solid  #DDDDDD;
  color: #77778d;
}

.post a:hover {
  color:#b8860b
}
.category a:hover {
  color:#b8860b
}

.profile  {
  padding-bottom: 18px;
}


.footer-right p {
  padding-top: 25px;
}
.post ul {
  padding-top: 25px;
}
.category ul {
  padding-top: 25px;
}

.post li {
  padding-bottom: 12px;
}
.category li {
  padding-bottom: 15px;
}

input {
  line-height:35px;
  display: block;
  width: 150px;
  padding-left:10px;
  font-size: 16px;
  margin-left: auto;
}

main {
  padding-bottom: 50px;
  border-bottom: 1px solid  #DDDDDD;
}


 footer li { 
  display: inline-block;
  width: 30px;
  height:15px;
 }

 footer {
   padding: 50px 0 ;
   display: flex;
 }

 footer ul {
   padding-right: 220px;
 }

 @media (max-width: 1000px) {
      body { 
    /* margin: 80px 140px 0 140px; */
    /* 左右の余白「140px」は広すぎるので狭くする、 */
    margin-left: 20px;
    margin-right: 20px;
  }   



  .prof img {
    /* 画像を少し小さくする。100pxのままがいいなら不要。 */
    width: 80px;
    height: 80px;

    /* 余白が余ったときや足りないとき伸び縮みしない。「80px」はwidthと同じ大きさを指定。 */
    flex: 0 0 80px;
  }
  .prof .name {
    /* 余白が余ったときや足りないとき伸び縮みする */
    flex: 1 1 0%;
  }
}
@media (max-width: 767px) {
  /* 画面サイズが767px以下のとき、フッターを横並びでなく縦並びにする */
  .introduction {
    display: block;
    
  }



  .prof,
  .footer-right,
  .post,
  .category {
    /* 縦並びにしたとき、横幅いっぱいに広げる */
    width: auto;
    padding-right: 10px;
  }

  .section {
    display:block;
   
}

.info {
  width: auto;
}

header .container {
  display: block;
}

.nav ul {
  display:block;
  padding:20px 0;
}

}
```

サイトの模写を練習しています。
bodyに左右のマージンを設定しているのですが、
レスポンシブにしたときにメインのイメージだけは画面いっぱいに広がるようにしたい場合、
どのようにしたらよいでしょうか？

```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Write-書くためのテーマ</title>
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>

  <div class="container">
    <div class="title">
      <h1><a class="logo" href="index.html">Write</a></h1>
      <p>書くためのテーマ</p>
    </div>

    <div class="nav">
      <ul>
        <li><a href="">ホーム</a></li>
        <li><a href="">ページ</a></li>
        <li><a href="">タイポグラフィー</a></li>
        <li><a href="">お問い合わせ</a></li>
        
      </ul>
    </div>

    <div class="search-icon">
      <span class="fa fa-search"></span>
    </div>

  </div>

</header>

<main>
  <div class="main-image">
    <img src="img/top.jpg">
    <h1>Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限までは省いたデザインは、あなたの文章を主役にします。</h1>
  </div>

  <div class="wrapper">
    <div class="section">
      <div class="date">
        <p>2018年9月1日</p>
      </div>
      <div class="info">
       <p><a href="">書くためのテーマ</a></p>
       <p>Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</p>
     </div>
   </div>  
    
     <div class="section">
       <div class="date">
         <p>2018年3月5日</p>
       </div>
       <div class="info">
        <p><a href="">画像付きの投稿</a></p>
        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
       </div>
    </div>

     <div class="section">
       <div class="date">
         <p>2018年3月5日</p>
       </div>
       <div class="info">
        <p><a href="">引用付きの投稿</a></p>
        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれ…</p>
       </div>
     </div> 
      
     <div class="section">
       <div class="date">
         <p>2018年3月5日</p>
       </div>
       <div class="info">
        <p><a href="">コメント付きの投稿</a></p>
        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれ…。</p>
      </div>
    </div> 

     <div class="section">
       <div class="date">
         <p>2018年3月3日</p>
       </div>
       <div class="info">
        <p><a href="">吾輩は猫である</a></p>
        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれ…</p>
      </div>
    </div>  

     <div class="section">
       <div class="date">
         <p>2018年9月1日</p>
       </div>
       <div class="info">
        <p><a href="">名前はまだ無い。どこで生れたかとんと見当がつかぬ。</a></p>
        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれ…</p>
      </div>
    </div>  


 </div>

 <div class="page">
  <ul>
    <li class="number"><a href="">1</li></a>
    <li class="number"><a href="">2</li></a>
    <li class="number"><a href="">3</li></a> 
    <li class="number"><a href="">次へ&raquo;</li></a>

  </ul>
</div>


<div class="introduction">

<div class="prof">
  <div class="profile">  
    <img src="img/profile.png">   
      <div class="name">
         <h1><strong>John Doe</strong></h1>
           <ul>
             <li><a href=""><i class="fab fa-twitter fa-fw"></i></a></li>
             <li><a href=""><i class="fab fa-facebook fa-fw"></i></a></li>
             <li><a href=""><i class="fab fa-instagram fa-fw"></i></a></li>
           </ul>
      </div>
 </div>  
    <p>これはプロフィールウィジェットです。ここにはプロフィール画像・名前・自己紹介文・ソーシャルリンク（最大7つ）を設定することができます。</p>
</div>
 

<div class="footer-right">
  <h2>フッター右</h2>
  <p>3つのフッター右ウィジェットエリアはフッターの右側に表示され、使用する数によって幅は自動的に調整されます。1つも使用しない場合は表示されません。</p>
</div>

<div class="post">
  <h2>最近の投稿</h2>
  <ul>
    <li><a href="">書くためのテーマ</a><br>2018年9月1日</li>
    <li><a href="">画像付きの投稿</a><br>2018年3月5日</li>
    <li><a href="">引用付きの投稿</a><br>2018年3月5日</li>
  </ul>
</div>
  
<div class="category">
  <h2>カテゴリー</h2>
  <ul>
    <li><a href="">サンプル投稿</li></a>
    <li><a href="">投稿フォーマット</li></a>
    <li><a href="">普通の投稿</li></a>   
  </ul>
</div>

</div>

  <input type="text" name="sabject" placeholder="検索...">

</main>

<footer>
  <ul>
    <li><a href=""><i class="fab fa-twitter fa-fw"></i></a></li>
    <li><a href=""><i class="fab fa-facebook fa-fw"></i></a></li>
    <li><a href=""><i class="fab fa-instagram fa-fw"></i></a></li>
  </ul>

  <p>Powered by WordPress | Theme: Write by Themegraphy</p>
</footer>

</body>
</html>


```

```CSS
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p, div {
  margin: 0;
  padding: 0;
}

 body { 
 font-family: "Yu Mincho","Hiragino MIncho Pro" ,"serif";
  margin:80px 140px 0 140px;   
}

* {
  box-sizing: border-box;
}

 img {
  max-width: 100%;
  height:auto;
} 

 li { 
  list-style: none;
 } 


a:hover {
  color:#b8860b;
}

p, li {
  color:#77778d;
}

header .container h1 {
  font-size: 40px;
  font-weight: bold;
  height:55px;

}

.logo {
  color:black;
}

header p {
  font-size: 18px;
 
}

header a {
  text-decoration: none;
}

 .nav ul { 
  display:flex;
  width: 450px;
  height: 84px;
  justify-content:space-between;
}



ul li {
  align-self:flex-end;

}

.container  a {
  color:black;
}

 header .container {
  display:flex;
  justify-content: space-between;
 }



 .search-icon span {
   display:block;
   padding-top: 60px;

 }


.main-image {
  margin-top:70px;
}


  main img {
    width:100%; 
  }

  .main-image h1 {
    color: #77778d;
    font-size: 25px;
    line-height: 1.9;
    padding: 85px 0 ;
    font-weight: normal;
    letter-spacing: 1px;
  }

  .wrapper a {
    color:black;
    font-size: 22px;
    font-weight: bold;
    text-decoration: none;

  }

  .section {
    display:flex;
    padding-bottom: 70px;
  }

  .date {
    width: 30%;
  }

  .info {
    width: 70%;
  }

  .info p {
    padding-bottom:20px;
  }


.number .next {
  display: block;
  
}

.page ul {
  text-align: center;
  display:flex;
  justify-content:center;
  
}

.number {
  width:50px;
  line-height:50px;
}

.number a {
  text-decoration: none;
  color: grey;
}

.next {
  width: 85px;
  line-height:50px;
}

.page li {
  border: 1px solid #DDDDDD;
  margin-right: 10px;
}

.page {
  padding-bottom: 100px;
  border-bottom: 1px solid  #DDDDDD;
}

.profile img {
  width:100px;
  height:100px;
  border-radius: 50%;
}

  .name li { 
  display: inline-block;
  width: 30px;
  height:15px;
}  

 .fa-fw {
 font-size: 25px;
 color:silver;
 
}

.fa-fw:hover{
  color: grey;
}


.profile {
  display:flex;
}



.name h1 {
  font-size: 20px;
  font-weight: bold;
  padding: 20px 0 15px 10px;
  
}

.name {
  padding-left: 20px;
}

.introduction {
  display:flex;
  padding-top: 40px;
}

.prof {
  width: 35%;
  padding: 40px 50px 0 0;
}
.footer-right {
  width: 25%;
  padding: 40px 50px 0 0;

}
.post {
  width: 20%;
  padding: 40px 50px 0 0;
}
.category {
  width:20%;
  padding: 40px 50px 0 0;
}

.introduction h2 {
  font-size: 16px;
  font-weight: normal;
}

.post a {
  text-decoration: none;
  border-bottom: 1px solid  #DDDDDD;
  color: #77778d;

}
.category a {
  text-decoration: none;
  border-bottom: 1px solid  #DDDDDD;
  color: #77778d;
}

.post a:hover {
  color:#b8860b
}
.category a:hover {
  color:#b8860b
}

.profile  {
  padding-bottom: 18px;
}


.footer-right p {
  padding-top: 25px;
}
.post ul {
  padding-top: 25px;
}
.category ul {
  padding-top: 25px;
}

.post li {
  padding-bottom: 12px;
}
.category li {
  padding-bottom: 15px;
}

input {
  line-height:35px;
  display: block;
  width: 150px;
  padding-left:10px;
  font-size: 16px;
  margin-left: auto;
}

main {
  padding-bottom: 50px;
  border-bottom: 1px solid  #DDDDDD;
}


 footer li { 
  display: inline-block;
  width: 30px;
  height:15px;
 }

 footer {
   padding: 50px 0 ;
   display: flex;
 }

 footer ul {
   padding-right: 220px;
 }

 @media (max-width: 1000px) {
      body { 
    /* margin: 80px 140px 0 140px; */
    /* 左右の余白「140px」は広すぎるので狭くする、 */
    margin-left: 20px;
    margin-right: 20px;
  }   



  .prof img {
    /* 画像を少し小さくする。100pxのままがいいなら不要。 */
    width: 80px;
    height: 80px;

    /* 余白が余ったときや足りないとき伸び縮みしない。「80px」はwidthと同じ大きさを指定。 */
    flex: 0 0 80px;
  }
  .prof .name {
    /* 余白が余ったときや足りないとき伸び縮みする */
    flex: 1 1 0%;
  }
}
@media (max-width: 767px) {
  /* 画面サイズが767px以下のとき、フッターを横並びでなく縦並びにする */
  .introduction {
    display: block;
    
  }



  .prof,
  .footer-right,
  .post,
  .category {
    /* 縦並びにしたとき、横幅いっぱいに広げる */
    width: auto;
    padding-right: 10px;
  }

  .section {
    display:block;
   
}

.info {
  width: auto;
}

header .container {
  display: block;
}

.nav ul {
  display:block;
  padding:20px 0;
}

}
```

@@ -8,6 +8,10 @@
 ```HTML
 <!DOCTYPE html>

質問編集履歴