Edit in JSFiddle

$('button').click(function(){
	$('nav ul').slideToggle();
})

<div class="container">
  <div class="full-width">
    <img src="http://vnfrkehd.dothome.co.kr/img/logo.png">
    <button>Menu</button>
  </div>
  <nav>
    <ul>
      <li><a href="#" class="active">home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Product</a></li>
      <li><a href="#">Service</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <div class="full-width mt20">
    <div class="col-7">
      <div class="post">
        <h1>Lorem ipsum dolor.</h1>
        <img src="http://vnfrkehd.dothome.co.kr/img/bg1.jpg">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia repudiandae quos, cum dolorum incidunt architecto laborum quidem in animi tempora aliquid, doloribus! Nostrum asperiores, ut hic soluta? Corrupti sapiente soluta, enim, ipsam, doloremque aspernatur corporis cum adipisci delectus, ab praesentium sequi voluptas odit ullam alias aliquid. Porro totam vitae corporis.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate eligendi voluptates ipsam, iure! Fuga eveniet at aperiam, molestiae illo quidem inventore unde debitis, cupiditate repudiandae facere, recusandae ad iusto omnis dolore! Culpa ratione ea error, asperiores voluptates facere explicabo esse quasi, perspiciatis in laudantium fugiat praesentium beatae quia ad quas sapiente tempora quos minima dolore itaque voluptatibus laboriosam, eum ex. Ut molestias magnam harum, sit voluptatem incidunt magni quis soluta!</p>
      </div>
    </div>
    <div class="col-3">
      <h1>Sidebar</h1>
      <ul>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit.</li>
    </ul>
    </div>
  </div>
  <div class="full-width">
    <p class="footer-text">@2018 Online web. Design For You</p>
  </div>
</div>

body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: #ccc;
}
.container{
  position: relative;
  width: 80%;
  margin: 0 auto;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
  min-height: 400px;
}
.full-width{
  width: 100%;
}
button{
  float: right;
  padding: 15px;
  background: #262626;
  border: 0;
  color: #fff;
  border-radius: 4px;
  cursor:pointer;
  display:none;
}
nav{
  width: 100%;
}
nav ul{
  margin: 20px 0 0;
  padding: 0;
  border-radius: 4px;
  background: #262626;
  overflow: hidden;
}
nav ul li{
  list-style: none;
  display: inline-block;
}
nav ul li a{
  display: block;
  padding: 15px 20px;
  color: #fff;
  text-decoration: none;
}
.active, nav ul li a:hover{
  background: #f00;
}
.full-width:after{
  content:'';
  display: block;
  clear: both;
}
.col-7{
  width: 70%;
  min-height: 400px;
  background: #ccc;
  float:left;
}
.col-3{
  width: 28%;
  min-height: 400px;
  background: #f1f1f1;
  float:right;
  box-sizing: border-box;
  padding: 20px;;
}
.mt20{
  margin-top: 20px;
}
.post{
  background: #f1f1f1;
  padding: 20px; 
}
img{
  max-width: 100%;
}
h1{
  margin: 10px 0;
}
.col-3 ul{
  margin: 0;
  padding: 0;
}
.col-3 ul li{
  list-style: none;
  padding: 8px;
  border-bottom: 1px solid rgba(0,0,0,.1);
}
.col-3 ul li:hover{
  background: #f00;
  color: #fff;
}
.footer-text{
  padding-top: 20px;
  text-align: center;
  font-weight: bold;
}
@media ( max-width: 900px){
  .container{
    width: 100%;
  }
  button{
    display:block;
  }
  nav ul{
    display: none;
  }
  nav ul li{
    display: block;
    text-align: center;
  }
  .col-7, .col-3{
    width: 100%;
    float: none;
  }
  .col-3 {
    margin-top: 20px;;
  }
}