Can't get my Aside element to format properly - html

Question

I am unable to get my aside element to align properly with the rest of my page. It sits above the main element and spills into the header. How do I fix that?
Here's what it looks like on the page:
Here's the CSS Style code I'm using:
* {
margin:0;
padding:0;
}
body {
font-size:1.1em;
font-family: Arial, Helvetica, sans-serif;
background-color:darkseagreen;
}
header {
padding: 1%;
margin-bottom: 3%;
text-align: center;
font-size:2em;
font-family: Arial, Helvetica, sans-serif;
text: white;
background-color: #4EEE94;
}
aside {
width: 25%;
padding: 0.5%;
margin: 0 5px 5px 0;
background-color: #1C86EE;
float: right;
border-radius: 20px;
position: relative;
min-height: 100%;
display: block;
}
#main {
width: 446px;
margin-right: 27%;
padding: 0.5%;
background-color: #EE6363;
text: white;
position: relative;
border-radius: 4%;
}
.map {
padding: 2em;
margin: 3em auto 3em auto;
position: relative;
display: block;
text-align: center;
width: 95%;
.image {
padding: 5%;
margin: 4em;
float: left;
position: relative;
left: 10px;
top: 15px;
}
}
div {
box-shadow: 10px 10px 5px #888888;
border: 2px solid;
border-radius: 25px;
}
nav ul li {
margin-right: 1em;
display: inline;
list-style-type: none;
}
nav li a {
padding: 1em;
color: white;
text-decoration: none;
}
nav li a:hover {
color: yellow;
text-decoration: underline;
}
footer {
margin: 0.5% 27% 0 0;
border-top: solid thick teal;
padding: 0.5%;
background-color: lime;
}

Answer 1

first issue with your css remove the braces after .image class.
.image {
padding: 5%;
margin: 4em;
float: left;
position: relative;
left: 10px;
top: 15px;
}
}
second thing use px or % or em do not use all (recommended) .
Third use id something like this
<div id="xyz"></div>
Not <div id="#xyz"></div> # is the css selector
also do not use multiple id like <div id="abc xyz"></div> u cannot use multiple id's use class instead of <div class="abc xyz"></div>