无法使我的Aside元素正确格式化

Question

我无法让我的旁边元素与我的其余页面正确对齐。它位于主元素上方并溢出到标题中。我该如何解决这个问题？

以下是页面上的内容：

这是我正在使用的CSS样式代码：

* {
    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

第一个问题是你的css删除了 .image 类之后的大括号。

.image {
padding: 5%;
margin: 4em;
float: left;
position: relative;
left: 10px;
top: 15px;
}
}

第二件事使用 px 或％或 em 不要全部使用（推荐）。

第三次使用id这样的东西

<div id="xyz"></div>

不是<div id="#xyz"></div>＃是css选择器

也不要使用多个ID <div id="abc xyz"></div>你不能使用多个id的使用类而不是<div class="abc xyz"></div>