I'm having trouble aligning my aside element on the page. It's not lining up properly with the rest of the content and is overlapping into the header area. How can I resolve this issue?
Here's a snapshot of what it currently looks like:
https://i.sstatic.net/btKYn.png
Below is the CSS code I have been 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;
}