Навигационный бар загораживает заголовки
Верстаю резюме сайт, и столкнулся с проблемой, что навигационный бар загораживает заголовок, тоесть выглядит вот так
а мне надо, чтобы выглядело так
Я пытался делать отступы, но навигационный бар следует за этим заголовком и постоянно загораживает его, какой бы отступ я не делал, как это можно исправить? Я добавил сюда код, я убрал много кода, оставил только две секции, чтобы показать, но дело в том, что тут не так работает как у меня, точнее в малом виде работает как у меня, но если развернуть на всю страницу, то тут навбар не загораживает заголовок, но чутка налезает, но может все равно получится показать по этому примеру, как сделать отступы, чтобы ничего не налезало. Также как можно сделать без js или jquery, только с помощью css плавные переходы между страницами, тоесть когда я нажимаю в навбаре на about, у меня там плавно переходило, а не как сейчас?
body {
margin: 0;
}
.header {
position: fixed;
width: 100%;
height: 50px;
background: #212121;
z-index: 2;
}
h1 {
margin: 50px;
margin-top: 1px;
float: left;
font-family: cursive;
background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4 51%, #E55D87 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h2 {
margin-top: 50px;
}
.navbar {
text-transform: uppercase;
line-height: 18px;
height: 50px;
float: right;
}
li {
display:inline-block;
margin:0;
text-transform:uppercase;
}
li:after {
display: block;
content: '';
border-bottom: 1px solid aqua;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
li:hover::after {
transform: scaleX(1);
}
.button {
text-decoration: none;
background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4 51%, #E55D87 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: cursive;
margin: 10px;
cursor: pointer;
font-size: 20px;
transition: 0.5s;
background-size: 200% auto;
}
.button:hover {
background-position: right center;
}
.my-photo {
position: relative;
border-radius: 50%;
height: 180px;
width: 180px;
padding: 0;
margin-top: 300px;
object-fit: cover;
z-index: -1;
margin-left: 700px;
margin-top: 150px;
}
.h2 {
font-size: 50px;
background: #19CFB1;
background: linear-gradient(to right, #19CFB1 0%, #C978CF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
font-family: cursive;
}
#text {
background: #1338CF;
background: linear-gradient(to right, #1338CF 0%, #CF70AF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 50px;
margin: 0;
font-size: 25px;
text-align: center;
font-family: cursive;
}
.home-image {
position: absolute;
background-size: cover;
background-position: center center;
width: 100%;
height: 100vh;
z-index: -1;
margin-bottom: -10px;
background-image: url("./img/foto-mustang-6-shelby-gt500_01.jpg")
}
.home-image::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0; left: 0;
background-color: rgba(0,0,0,0.7);
}
blockquote {
text-align: center;
margin: 0;
color: white;
padding: 30px 30px 30px 60px;
font-family: 'Lato', sans-serif;
font-weight: 300;
}
blockquote:before {
content: "\201C";
font-family: Arial;
color: #CBDDE7;
font-size: 50px;
position: absolute;
left: 362px;
top: 596px;
z-index: -1;
}
blockquote p {
font-style: italic;
font-size: 20px;
margin-top: 130px;
}
.about {
padding: 20px 0;
}
#about{
width: 1300px;
height: 687px;
padding: 0 80px;
margin: auto;
}
.title {
position: relative;
text-align: center;
font-size: 40px;
font-weight: 500;
margin-bottom: 26px;
padding-bottom: 20px;
font-family: cursive;
z-index: -1;
}
.title::before {
content: "";
position: absolute;
bottom: 0px;
left: 50%;
width: 180px;
height: 3px;
background: #111;
transform: translateX(-50%);
}
.title::after {
content: "who i am";
font-family: 'Ubuntu', sans-serif;
position: absolute;
bottom: -8px;
left: 50%;
font-size: 20px;
color: crimson;
padding: 0 5px;
background: #fff;
transform: translateX(-50%);
}
.content {
display: flex;
align-items: center;
justify-content: space-between;
}
.image {
height: 500px;
width: 350px;
margin-left: 5px;
margin-top: 50px;
object-fit: cover;
border-radius: 15px;
}
.column-right {
width: 55%;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 18px;
text-align: justify;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./img/icon.png" type="image/x-icon">
<link rel="stylesheet" href="./style.css">
<title>CV</title>
</head>
<body>
<header class="header">
<ul class="navbar">
<li><a href="#home" class="button">Home</a></li>
<li><a href="#about" class="button">About Me</a></li>
<li><a href="#portfolio" class="button">Portfolio</a></li>
<li><a href="#contact" class="button">Contact Me</a></li>
</ul>
<h1>My CV</h1>
</header>
<section class="home" id="home">
<div class="wrapper">
<div class="home-header home-header-small">
<div class="home-image"></div>
<div class="container">
<div class="content-center">
<div class="profile-image">
<img src="" class="my-photo"/>
</div>
<div class="h2">Lorem ipsum</div>
<p id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<footer>— <cite>Lorem ipsum</cite></footer>
</blockquote>
</div>
</div>
</section>
<section class="about" id="about">
<h2 class="title">About me</h2>
<div class="content">
<img src="" class="image"/>
<div class="column-right">
<div class="text">Lorem ipsum</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit minus impedit maxime, quae soluta quis cumque perferendis! Doloribus quaerat, placeat iste facere, aspernatur ex cum veritatis laudantium, officia, non porro exercitationem incidunt quis dolore? Officia ex accusamus expedita optio, voluptatem minus? In maiores omnis aperiam earum ab molestiae beatae laborum blanditiis incidunt, delectus dolor, id voluptates optio aspernatur aliquam saepe atque labore?</p>
</div>
</div>
</section>