私はメインのコンテンツを左側に、navを右側に配置しようとしています。現在、ナビは一番下に座っています。誰かが私が間違ってどこに行ったのか教えてください。ナビが正しくフローティングしていない
コード(http://codepen.io/kiddigit/pen/PNXRVE)
* {
font-family: garamond;
line-height: 1.9em;
color: #212121;
}
.wrapper {
width: 75%;
margin: 0 auto;
border: 1px solid blue;
padding: 10px;
overflow: hidden;
}
.wrapper2{
overflow: scroll;
}
.main_content {
float: left;
}
.main_text {
float: left;
}
.nav {
float: right;
padding-top: 10px;
width: 25%;
}
header {
border-bottom: 5px solid;
margin-bottom: 10px;
overflow: hidden;
}
header ul {
list-style-type: none;
margin-top: 20px;
display: inline;
}
header li {
float: right;
margin-right: 20px;
width: 110px;
}
header li:first-child {
margin-right: 0;
}
header li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
header li a:hover {
background-color: #111;
color: white;
}
header h1 {
float: left;
text-align: left;
margin: 0 170px .5em 0;
line-height: 0;
font-size: 2em;
}
h1 a {
text-decoration: none;
color: black;
}
/*drop-down menu styles begin*/
.dropbtn {
color: black;
padding: 13px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
display: inline-block;
float: right;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown-content a {
color: white;
padding: 0 27.5px ;
text-decoration: none;
display: block;
background-color: #3f3f3f;
}
.dropdown-content a:hover {
color: #a9a9a9;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: black;
color: white;
}
/*drop-down menu styles end*/
/*Right nav content starts here*/
.nav li {
list-style-type:none;
font-size: 1em;
}
.nav ul {
padding-left: 10%;
font-size: 1em;
}
.nav ul a:link {
text-decoration: none;
color: black;
font-size: 1em;
}
.nav ul a:visited {
text-decoration: none;
color: black;
font-size: 1em;
}
.nav ul a:hover {
text-decoration: none;
background-color: black;
color: white;
padding:3px;
font-size: 1em;
}
/*Right nav ends here*/