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

Question

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

这是它在页面上的样子：

这是我正在使用的 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选择器

也不要像<div id="abc xyz"></div>那样使用多个id 你不能使用多个id的使用类来代替<div class="abc xyz"></div>