2カラムレイアウトの作成

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>2カラムレイアウトの作成2</title>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
<style>
html,body,h1,ul,li{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #222;
}

.container{
width: 960px;
margin: 0 auto;
padding: 10px;
}
header{
width: 960px;
height: 300px;
background:url(img/header.jpg) no-repeat;
margin-bottom: 10px;
}
h1{
font-family: 'Josefin Sans', sans-serif;
font-size: 60px;
color: coral;
padding: 100px 0 0 30px;
}
.g-nav {
width: 960px;
margin: 0 auto 10px;
}
.g-nav>ul{
overflow: hidden;
}
.g-nav li{
width:20%;
height: 50px;
float:left;
}
.g-nav a{
display: block;
border-right: 1px solid #000;
text-align:center;
line-height: 50px;
background-color: cornsilk;
}
.g-nav li:last-child>a{
border-right:none;
}
.g-nav a:hover{
background-color: darkslategray;
color: #FFF;
}


.wrapper{
overflow: hidden;
margin-bottom: 10px;
}
.main{
width: 700px;
height: 500px;
background-color:beige;
float: right;
}
.main img{
float:left;
margin-right: 10px;
}
.sub{
width: 250px;
height: 500px;
background-color: darkseagreen;
float: left;
}
footer{
width: 960px;
height: 100px;
background-color: darkgray;
}
footer>p{
text-align: center;
padding-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Cafe de Felica</h1>
</header>
<nav class="g-nav">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">access</a></li>
<li><a href="#">info</a></li>
<li><a href="#">staff</a></li>
</ul>
</nav>

<div class="wrapper">

<div class="main">
<p><img src="img/main.jpg" alt="">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事</p>
</div>
<div class="sub"></div>
</div>
<footer>
<p><small>&copy; Cafe de Felica</small></p>
</footer>
</div>
</body>
</html>