Файл CSS мешает ширине панели навигации при размерах экрана менее 768 пикселей. ⇐ CSS

[Anonymous]

Я столкнулся с проблемой на панели навигации моего веб-сайта: CSS-файл мешает ее ширине, особенно при размерах экрана менее 768 пикселей. Панель навигации не покрывает всю ширину экрана, как ожидалось. Я пробовал настроить различные свойства, но мне не удалось решить проблему. Проблема связана с моим элементом svg, но я не могу понять, в чем дело.
вот как это выглядит
css-файл для панели навигации:
* {
box-sizing: border-box;
}

body {
margin: 0;
padding: 0;
background-color: lightblue;

}

.navbar {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
background-color: #333;
color: white;

}

.brand-title {
font-size: 1.5rem;
margin: .5rem;

}

.navbar-links {
height: 100%;

}

.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}

.navbar-links li {
list-style: none;
}

.navbar-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}

.navbar-links li:hover {
background-color: #555;
}

.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}

.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}

@media (max-width: 800px) {

.navbar {
flex-direction: column;
align-items: flex-start;

}

.toggle-button {
display: flex;
}

.navbar-links {
display: none;
width: 100%;
}

.navbar-links ul {
width: 100%;
flex-direction: column;
}

.navbar-links ul li {
text-align: center;

}

.navbar-links ul li a {
padding: .5rem 1rem;

}

.navbar-links.active {
display: flex;

}
}

html:

Hello how are you feeling today

• Logout
• 
  
  
  
  
  
  ONE1
  TWO 2
  THREE 3
  FOUR4
  FIVE5
  SIX 6
  SEVEN7
  EIGHT8
  NINE 9
  TEN 10
  ELEVEN11
  TWELVE12
  THIRTEEN 13
  
  
  
  
  
  и CSS-файл для SVG:
  .svg-container{
  display: flex;
  justify-content: center;
  align-items: center;
  
  }
  
  .svg-container a:hover use {
  stroke: red;
  
  }
  
  .slider-wrapper {
  
  text-align: center;
  
  }
  
  
  Подробнее здесь: https://stackoverflow.com/questions/782 ... than-768px