CSS ZU HTML zwei Boxen untereinander?

Hallo ich bin am verzweifeln ..

was ist falsch? ich möchte eig nur ein Layout wo links eine Box mit inhalt ist und rechts ein Nav und darunter eine box .. aber irgendwie bekomme ich den grünen streifen rechts nicht weg ... help

Habt gnade ich lerne es gerade neu :D

body{
font: 100%/1.3 Verdana, Arial, Helvetica, sans-serif;
color: #000;
background: #a2a2a2;
margin: 0;
}
#holder {
max-width: 60rem;
background: green;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
main{
max-width: 60rem;
background: green;
margin-top: 20px;
display: flex;
width: 70%;
flex-wrap: wrap;
padding-left:1rem;
padding-right: 1rem;
padding-top: 0%;
}
.callout{
margin: 0;
padding-top:1rem;
font-size: 30px;
}
nav{
padding: 1rem;
text-align: left;
flex: 1;
max-width: 20rem;
background: blue;
}
nav ul{
margin: 0;
padding: 0.1rem;
}
nav li{
margin: 0.5rem 0;
font-size: 120%;
list-style-type: none;
padding: 0.5rem;
}
nav a:link {
display: block;
width: 90%;
font-size: 1rem;
margin: 0.2rem;
padding: 0.2rem;
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
nav a:visited,
nav a:hover,
nav a:active,
nav a:focus {
color: #000000;
}
aside p{
font-size: 10px;
}
.container{
display: flex;
flex-direction: column;
padding-right: 0;
}
footer{
background: #ffff6b;
margin: 0 auto;
padding: 2rem;
flex: 1;
height: 30%;
max-width: 60rem;
}