<nav>
  <ul class="menu">
    <li><a href="#" class="logo">Logo</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
  </ul>
</nav>

<div class="main">
  <section class="box1">
    <h1>box1</h1>
    <p>
     こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。
    </p>
  </section>
  <section class="box2">
    <h1>box2</h1>
    <p>
     こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。
    </p>
  </section>
  <section class="box3">
    <h1>box3</h1>
.menu {
  display: -webkit-flex;
  display: flex;
}
.menu li:first-child {
  margin-right: auto;
}
.menu li {
  list-style-type:none;
}
.menu a {
  margin: 5px;
  border-radius: 15px;
  background: #60B99A;
  color: #fff;
    display: block;
    padding: 10px;
    text-decoration: none;
}
.menu .logo {
   background: #e40438;
}

/* Main contents */
.main section {
  -webkit-flex: 1;
  flex: 1;
  margin: 10px;
  border-radius: 5px;
  background: #e6e6e6;
  padding: 15px;
}

.main {
  display: -webkit-flex;
  display: flex;
}
.main h1 {
  color: #E6AC27;
  font-size: 18px;
}
.main p {
  margin-top: 10px;
}

.box2 {
  flex: 2;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.