Извините, если это плохой вопрос, я очень новичок в разработке веб-сайтов.
У меня возникли проблемы с центрированием моей панели навигации по остальной части страницы. Я немного повозился с этим, но по какой-то причине не могу сосредоточиться на тексте. Это так немного не так. Я предоставил изображение, а также мой код. Я был бы очень признателен, если бы вы посмотрели и дали мне какие-либо советы или рекомендации.
https://nathanscottcreations.github.io/
#wrapper {
max-width: 100%;
}
body,
html {
height: 100%;
margin: 0;
}
.bg {
background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, .1)), ` url(mountain.jpg);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
ul {
list-style-type: none;
display: flex;
justify-content: space-around;
}
li {
text-decoration: none;
text-align: center;
width: 175px;
height: 175px;
}
a:link {
color: #414141
}
a:hover {
color: #ebc600;
}
@font-face {
font-family: "ubuntu";
font-style: italic;
font-weight: 300;
src: local("Lato Light Italic"), local("Lato-LightItalic"), url(https://fonts.gstatic.com/s/ubuntucondensed/v8/u-
4k0rCzjgs5J7oXnJcM_0kACGMtT-Dfqw.woff2) format("woff2");
}
h1 {
width: 100%;
color: #fff;
font-size: 50px;
font-family: "ubuntu";
text-transform: uppercase;
text-align: center;
font-weight: 1000;
font-family: "Josefin Sans", sans-serif;
background: linear-gradient(to right, #ccad14 10%, #fff 50%, #262626 80%);
background-size: auto auto;
background-clip: border-box;
background-size: 200% auto;
color: #fff;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: textclip 1.35s linear infinite;
}
@keyframes textclip {
to {
background-position: 200% center;
}
<!doctype html>
<html lang="en">
<head>
<title>Valley City Group</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="VCGstyle.css">
</head>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Services.html">Services</a></li>
<li><video onmouseover="this.play()" onmouseout="this.pause();this.currentTime=0;" style="width:
175px; height: 175px;">;
<source id="mp4" src="animatedLOGO.mp4" type="video/mp4">
</video></li>
<li><a href="Blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<body>
<div class="bg">
<br><br><br><br>
<h1>Valley City Group</h1>
</div>
<div>
<h2>About Us</h2>
</div>
</body>
</html>