JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu" class="big-bg">
      <header class="page-header wrapper">
       <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WEBカフェホーム"></a></h1>

       <nav>
         <ul class="main-nav">
           <li><a href="news.html">News</a></li>
           <li><a href="menu.html">Menu</a></li>
           <li><a href="contact.html">contact</a></li>
         </ul>
       </nav>

     </header>
    </div>

    <div class="menu-contents wrapper">
      <h2 class="page-title">Menu</h2>
      <p>
        体に優しい自然食を提供する、WEB　CAFE。無添加の食材を利用したメニューが特徴です。
        おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒やされください。
      </p>
    </div><!-- /.menu-content -->

    <footer>
      <div class="wrapper">
        <p><small>&copy;2019 Manabox</small></p>
      </div>
    </footer>

CSS

@charset "UTF-8";

/*　共通部分
------------------------*/
html{
  font-size:100%;
}

body{
  font-family:"Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ Pro W3",sans-serif;
  line-height:1.7;
  color:#432;

}

a{
  text-decoration:none;

}

img{
  max-width:100%;

}

/*　HEADER
------------------------*/
.logo{
  width:210px;
  margin-top:14px;
}

.main-nav{
  display:flex;
  font-size:1.25rem;
  text-transform:uppercase;
  margin-top:30px;
  list-style:none;
}

.main-nav li{
  margin-left:36px;
}

.main-nav a{
  color:#432;
}

.main-nav a:hover{
  color:#0bd;
}

.page-header{
  display:flex;
  justify-content:space-between;
}

.wrapper{
  max-width:1100px;
  margin:0auto;
  padding:0 4%;
}


/*　HOME
------------------------*/

.home-contact{
  text-align:center;
  margin-top:10%;
}

.home-contact p{
  font-size:1.125rem;
  margin:10px 0 42px;
}

/* 見出し */
.page-title{
  font-size:5rem;
  font-family:'Philosopher',serif;
  text-transform:uppercase;
  font-weight:normal;
}

/* ボタン */
.button{
  font-size:1.375rem;
  background:#0bd;
  color:#fff;
  border-radius:5px;
  padding:18px 32px;
}

.button:hover{
  background:#0090aa;
}

/* 大きな背景画像 */
.big-bg{
  background-size:cover;
  background-position:center top;
  background-reprat:no-repeat;
}

#home{
  background-image:url(https://placehold.jp/24/99cc99/339933/350x150.png?text=../images/main-bg.jpg);
  min-height:100vh;
}

#home. page-title {
  text-transform:none;
}


/*　NEWS
------------------------*/

#news {
    background-image: url(https://placehold.jp/24/99cc99/339933/350x150.png?text=../images/news-bg.jpg);
    height: 270px;
    margin-bottom: 40px;
}

#news .page-title {
    text-align: center;
}

/*　フッター
------------------------*/

footer{
  background:#432;
  text-align:center;
  padding:26px;
}

footer p{
  color:#fff;
  font-size:0.875rem
}

/* 記事部分 */
article{
  width:74%;
  order: 2;
}

/* サイドバー */
aside{
  width:22%;
  order: 3;
}

.ad{
  order: 1;
}

.news-contents{
  display:flex;
 ...