Применяются не все стили к странице
Не пойму почему не все стили применяются к классу,также можете подсказать как сделать в ссылки на разделы белым цветом,а в описании про себя сделать текст по центру-слева и кнопку как исправить.
* {
padding: 0px;
margin: 0px;
border: 0px;
}
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
aside,
nav,
footer,
header,
section {
display: block;
}
body {
line-height: 1;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
main {
flex: 1 1 auto;
}
body,
html {
height: 100%;
}
input::-ms-clear {
display: none;
}
button {
background-color: transparent;
cursor: pointer;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
a,
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
ul li {
list-style: none;
}
img {
vertical-align: top;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: inherit;
font-size: inherit;
}
.header {
width: 1440px;
height: 154px;
background-color: rgba(7, 32, 63, 1);
border: 0 0 1 0px;
display: flex;
gap: 20px;
color: white;
align-items: center;
justify-content: space-around;
}
.start {
width: 257px;
height: 44px;
border: 1px;
background-color: ;
text-decoration: ;
font-size: 36px;
margin-top: px;
margin-left: px;
align-items: center;
padding: 55 55 135 1048px;
}
.end {
width: 691px;
height: 44px;
gap: 40px;
background-color: ;
font-size: 36px;
display: flex;
color: white;
align-items: center;
padding: 55 55 614 135px;
text-decoration: ;
mix-blend-mode: difference;
}
.about_me {
height: 801px;
width: 1440px;
background-color: rgba(7, 32, 63, 1);
color: orange;
display: flex;
}
.info_1 {
font-family: Montserrat;
font-size: 64px;
font-weight: 800;
line-height: 78.02px;
text-align: left;
color: rgba(217, 217, 217, 1);
width: 605px;
height: 78px;
margin-top: 160px;
margin-left: 137px;
background-color: ;
}
.info_2 {
width: 605px;
height: 209px;
font-size: 36px;
color: rgba(217, 217, 217, 1);
margin-top: 49px;
margin-left: 137px;
background-color: red;
}
.button {
font-size: 50px;
width: 605px;
height: 106px;
background: rgba(217, 217, 217, 1);
align-items: end;
text-align: center;
border-radius: 100px;
margin-top: 49px;
margin-left: 137px;
display: flex;
justify-content: center;
}
.avatar {
width: 516px;
height: 516px;
margin-top: 135px;
margin-left: 46px;
border-radius: 100px;
border: 0 0 5 0 px;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/main.css">
<title>Document</title>
</head>
<body>
<header>
<div class="header">
<div class="start">
@VLADOOS
</div>
<div class="end">
<div class="end1"><a href="#">МОИ РАБОТЫ</a></div>
<div class="end1"><a href="#">ОБО МНЕ</a></div>
<div class="end1"><a href="#">КОНТАКТЫ</a></div>
</div>
</div>
</header>
<footer>
<div class="container">
<div class="about_me">
<div class="info">
<div class="info_1">
Я - фронтендер
</div>
<div class="info_2">
Какая-то очень интересная информация обо мне. Очень интересная информация...
</div>
<div class="button">
<button>связаться со мной</button>
</div>
</div>
<div class="avatar">
<img src="images/1.jpg">
</div>
</div>
</div>
</footer>
</body>
</html>