Я делаю проект на freeCodeCamp, касающийся страницы размещения продукта.Страница теперь просит меня исправить мой #navbar в верхней части области просмотра.Хотя это работает с position: fixed, после добавления фиксированной позиции в CSS панель навигации больше не остается в центре и перемещается влево.Если вы удалите position: fixed;, вы поймете, что я имею в виду.Почему это происходит?
Перед добавлением фиксированной позиции навигационная панель центрировалась (орфография Великобритании; -}) через margin-left: center;, margin-right: center;.У меня также есть окно просмотра шириной 800px с автоматической высотой (то есть стиль BBC).
Важное примечание. Был создан логотип, который я впоследствии добавил в документ, но, похоже, он не отображается (он размещен на tinypic).Если вы не видите этот логотип, он расположен между заголовком и видео.
Дополнительная информация: мое видео было отцентрировано до того, как я внес изменение.Если бы вы могли помочь мне с этим, я был бы признателен.Но это не главное в этом вопросе.
#mainbody {
width: 800px;
height: auto;
margin-right: auto;
margin-left: auto;
font-family: garamond, serif;
}
#h1title {
text-align: center;
text-shadow: 16px 8px 16px;
font-size: 38px;
padding-top: 10px;
}
#header-img {
display: block;
width: auto;
height: auto;
margin-left: auto;
margin-right: auto;
}
#nav-bar {
text-align: center;
position: fixed;
right: 0;
left: 0;
}
.nav-link {
text-decoration: none;
color: black;
font-weight: 900;
}
.nav-link:hover {
color: black;
}
.nav-button {
-webkit-border-radius: 50%;
background-color: orange;
height: auto;
width: 100px;
transition: opacity 1s linear;
}
.nav-button:hover {
background-color: white;
opacity: 0.30;
}
#video {
display: block;
margin-right: auto;
margin-left: auto;
}
#form {
}
legend {
font-weight: 700;
}
#submit {
margin-top: 5px;
}
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Quality Prints</title>
</head>
<body id="mainbody">
<a name="home-link"></a>
<header id="header">
<nav id="nav-bar">
<button class="nav-button"><a class="nav-link" href="#home-link">Home</a></button>
<button class="nav-button"><a class="nav-link" href="#">Products</a></button>
<button class="nav-button"><a class="nav-link" href="#contact-link">Contact</a></button>
</nav>
<h1 id="h1title">Quality Prints ™</h1><hr />
<img id="header-img" src="http://i66.tinypic.com/157ltle.jpg">
</header>
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/CqtLKw7cJaY?rel=0&showinfo=0&start=5" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><br />
<form action="https://www.freecodecamp.com/email-submit" id="form">
<a name="contact-link"></a>
<fieldset>
<legend>Information Pack by Email</legend>
<label for="emailme">Email Address:</label><br />
<input name="emailme" type="email" id="emailmeinput" placeholder="Your email address"><br />
<input type="submit" value="Send" id="submit" formaction="https://www.freecodecamp.com/email-submit">
</fieldset>
</form>
</body>
</html>
Я отредактировал, чтобы исправить синтаксис.Как сказал Андрей, после слова «.nav-button: hover» отсутствовал символ «}».Я также добавил 'left: 0;'и 'право: 0;'на «# nav-bar».