CSS wrong displaying - html

Question

I want to get Div with background colored and put #title aligned to left and <nav> aligned to left and both of them in one line.
I couldn't get them into one line! And I couldn't give #Header background-color.
/* Reset */
html, body, div, h1, h2, h3, a, p, img, ul, li, footer, fieldset, form, label, header, section {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.page {
background-color: #fff;
}
#banner {
padding: 8em 0 5em 0;
height: 75vh;
background-image: url(images/banner1.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
text-align: center;
position: relative;
}
#semiopacity {
background-color: rgba(20, 15, 10, 0.7);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
a {
margin: 0 0 2em 0;
font-weight: 700;
font-size: 20px;
color: #fff;
text-decoration: none;
font-family: Lato, serif;
}
p {
margin: 0 0 2em 0;
font-weight: 700;
font-size: 20px;
color: #fff;
}
h1,
h2,
h3 {
font-weight: 700;
line-height: 1.5;
margin: 0 0 1em 0;
font-family: Lato, serif;
color: #fff;
}
h1 {
margin-top: 6em;
font-size: 2em;
text-align: center;
}
h2 {
margin-bottom: 2em;
text-align: center;
font-size: 1.5em;
}
#header {
padding: 1em 0 2em 0;
background: #e6e6e6;
}
nav {
margin: 0;
padding: 0;
text-align: right;
}
#title {
font-size: 1.3em;
margin: 1em 1em 0 0;
text-align: left;
margin: 0;
}
#main {
font-size: 1.3em;
margin: 1em 2em 0 0;
}
#lang {
font-size: 1.3em;
margin: 1em 1em 0 0;
}
<title>KAZAKHSTAN — world's large center of travel</title>
<meta charset="utf-8">
<div class="page">
<section id="banner">
<section id="semiopacity">
<div id="Header">
KAZAKHSTAN
<nav>
<ol>
<tr>MAIN</tr>
<tr>CONTACT</tr>
</ol>
</nav>
</div>
<h1>KAZAKHSTAN</h1>
<p>KAZAKHSTAN — WORLD'S LARGE CENTER OF TRAVEL.</p>
</section>
</section>
<section id="description">
</section>
</div>

Answer 1

I tried to fix it:
/* Reset */
html, body, div, h1, h2, h3, a, p, img, ul, li, footer, fieldset, form, label, header, section {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.page {
background-color: #fff;
}
#banner {
padding: 8em 0 5em 0;
height: 75vh;
background-image: url(images/banner1.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
text-align: center;
position: relative;
}
#semiopacity {
background-color: rgba(20, 15, 10, 0.7);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
a {
margin: 0 0 2em 0;
font-weight: 700;
font-size: 20px;
color: #fff;
text-decoration: none;
font-family: Lato, serif;
}
p {
margin: 0 0 2em 0;
font-weight: 700;
font-size: 20px;
color: #fff;
}
h1,
h2,
h3 {
font-weight: 700;
line-height: 1.5;
margin: 0 0 1em 0;
font-family: Lato, serif;
color: #fff;
}
h1 {
margin-top: 6em;
font-size: 2em;
text-align: center;
}
h2 {
margin-bottom: 2em;
text-align: center;
font-size: 1.5em;
}
#header {
padding: 1em 0 5em 0;
background-color: rgba(20, 15, 10, 0.7);
}
#nav {
margin: 0;
padding: 0;
text-align: right;
float: left;
}
#title {
font-size: 1.3em;
margin: 0;
}
#main {
font-size: 1.3em;
margin: 1em 2em 0 0;
}
#lang {
font-size: 1.3em;
margin: 1em 1em 0 0;
}
#buttons {
font-size: 1.3em;
margin: 1em 1em 0 0;
text-align: left;
margin: 0;
float: left;
}
<title>KAZAKHSTAN — world's large center of travel</title>
<meta charset="utf-8">
<div class="page">
<section id="banner">
<section id="semiopacity">
<div id="Header">
<div id="nav">
<ol>
<tr><a id="title" href="#">KAZAKHSTAN</a></tr>
<tr>MAIN</tr>
<tr>CONTACT</tr>
</ol>
</div>
</div>
<h1>KAZAKHSTAN</h1>
<p>KAZAKHSTAN — WORLD'S LARGE CENTER OF TRAVEL.</p>
</section>
</section>
<section id="description">
</section>
</div>