Я работаю над проектом для школы, и у меня чертовски много времени получается, чтобы CSS сделал то, что я хочу. Я очень новичок в HTML и CSS. Каждый раз, когда я делаю изменения, что-то еще портится, это очень расстраивает. Я занимаюсь устранением неисправностей самостоятельно, но теперь прошу помощи. Я беру онлайн-класс, чтобы инструкторы были не так доступны.
Вот как я хочу, чтобы это выглядело
И это то, что мой страница выглядит как
Пожалуйста, помогите мне и скажите мне, что я делаю неправильно.
Спасибо!
Вот мой CSS код:
.navigation-bar {
width: 100%;
height: 150px;
margin-top: 40px;
background-color: #d0d0d0;
}
.logo {
display: inline-block;
vertical-align: top;
width: 275px;
height: 114px;
margin-left: 20px;
margin-top: 12px;
float: left;
}
.navigation-bar > a {
display: inline-block;
vertical-align: top;
margin-right: 20px;
height: 17px;
line-height: 150px;
color: #03a3df;
font-family: 'Arial', sans-serif;
font-size: 40px;
font-weight: bold;
float: right;
}
navigation-bar:hover{
color: #444444;
}
h2 {
color: #03a3df;
font-size: 24px;
font-weight: bold;
font-family: 'Arial', sans-serif;
}
h3 {
color: #03a3df;
font-size: 17px;
font-weight: bold;
}
p {
font-family: 'Arial', sans-serif;
font-size: 17px;
font-weight: 400;
color: white;
}
section {
display: inline-block;
width: 70%;
height: 300px;
padding-top: 20px;
padding-left: 20px;
text-align: justify;
}
aside {
display: inline-block;
width: 25%;
height: 200px;
}
aside {
display : inline-block;
width : 280px;
height : 640px;
background-color: #ecb722;
margin-top: 20px;
margin-right: 20px;
padding-left: 20px;
font-family: 'Arial', sans-serif;
float: left;
}
body {
background-color: #444444;
}
.container {
position: relative;
text-align: left;
color: white;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.footer {
position: relative;
left: 0px;
bottom: 0px;
width: 100%;
}