Я пытаюсь создать отзывчивое боковое меню, чтобы скользить и выходить. Я хочу, чтобы состояния наведения каждого элемента расширяли всю ширину контейнера, но по какой-то причине всегда есть пробел, и я не могу заставить текст выравниваться вправо. Я перепробовал все, что знаю и исследовал как мог, и ничего не нашел. Может ли кто-нибудь помочь мне понять, что происходит не так?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,500,700,900" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Brushworks NW Inc.</title>
</head>
<body>
<nav class="navbar animated fadeIn">
<span class="open-slide">
<a href="#" onclick="openSlideMenu()">
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
<path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
<path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
</svg>
</a>
</span>
<ul class="navbar-links">
<li><a class="active" href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">CONTACT US</a></li>
<li id="number">(360) 679-4444</li>
</ul>
</nav>
<div class="side-hidden">
</div>
<div id="side-menu" class="side-nav">
<ul>
<li><a href="#" class="btn-close" onclick="closeSlideMenu()">×</a></li><br>
<li class="nav-item"><a href="#">Home</a></li>
<li class="nav-item"><a href="#">About</a></li>
<li class="nav-item"><a href="#">Services</a></li>
<li class="nav-item"><a href="#">Contact</a></li>
</ul>
</div>
<script>
function openSlideMenu(){
document.getElementById('side-menu').style.width = '250px';
}
function closeSlideMenu(){
document.getElementById('side-menu').style.width = '0';
}
</script>
</body>
</html>
body, html{
font-family: 'Raleway', sans-serif;
margin: 0;
padding: 0;
width: 100%;
}
.container{
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
/*-- ----------------------------------------------------------------------------------- -->
<!-- NAVIGATION -->
<!-- ----------------------------------------------------------------------------------- --*/
.navbar {
background-color: #FFFFFF;
width: 100%;
height: 100px;
margin: 0;
border-bottom: 8px solid #CE2026;
}
.navbar-links {
max-width: 1090px;
margin-left: auto;
margin-right: auto;
position: relative;
bottom: 15px;
left: 30px;
}
.navbar-links a:hover {
background: #831517;
color: #FFFFFF;
transition: background 0.4s ease 0s;
transition-property: background;
transition-duration: 0.4s;
transition-timing-function: ease;
transition-delay: 0s;
}
.navbar-links a {
display: inline;
color: #444444;
text-decoration: none;
text-align: center;
margin: 0 5px 0 0;
font-size: 15px;
padding: 10px 17px;
right: 25px;
}
nav .active {
background: #CE2026;
color: #FFFFFF;
}
.navbar ul {
margin: 0 auto;
padding: 0;
list-style: none;
text-decoration: none;
width: 100%;
height: 100px;
}
ul li {
list-style: none;
display: inline-block;
margin-top: 50px;
font-size: 1.4em;
}
#number {
float: right;
padding-right: 0;
margin-top: 50px;
margin-right: 85px;
font-size: 21px;
font-weight: normal;
}
.side-hidden {
background-color: #000;
opacity: 0.6;
height: 1000px;
width: 100%;
position: relative;
top: 0;
right: 250px;
margin: 0;
display: none;
}
/* Responsive Menu*/
.open-slide {
float: right;
z-index: 5;
display: none;
}
.side-nav {
width: 0;
height: 100%;
z-index: 1;
position: fixed;
background-color: #111;
opacity: 0.9;
transition: 0.5s;
right: 0px;
text-align: right;
display: block;
transition: 0.3s;
z-index: 6;
}
.side-nav ul {
display: block;
text-decoration: none;
color: #ccc;
z-index: 6;
}
.side-nav ul a {
position: relative;
width: 100%;
padding: 10px 130px 10px 100px;
text-decoration: none;
color: #ccc;
margin-right: 20px;
z-index: 6;
right: 30px;
text-align: right;
}
.side-nav .btn-close {
position: absolute;
top: 0;
left: 22px;
font-size: 36px;
}
.side-nav a:hover {
color: #fff;
background: #CE2026;
}
@media only screen and (max-width: 1000px) {
.navbar-links {
display: none;
}
.open-slide {
display: block;
margin-right: 5%;
margin-top: 3.5%;
}
}
Сначала сверните экран, чтобы переключить мобильный вид. Когда вы щелкаете меню гамбургера, оно выдвигается. Но когда вы наводите курсор мыши на навигационные ссылки, только часть блока элементов выделяется красным цветом вместо полной ширины. И блоки подсветки должны располагаться один над другим, но между навигационными ссылками есть промежутки. Я не знаю, почему я не могу заставить его делать то, что я хочу, и мне кажется, что я все перепробовал.