CSS 文件在屏幕尺寸小于 768px 时干扰导航栏宽度

Question

我的网站导航栏遇到问题，CSS 文件似乎干扰了其宽度，特别是在屏幕尺寸小于 768 像素的情况下。导航栏没有按预期覆盖屏幕的整个宽度。我尝试过调整各种属性，但没有成功解决问题。我的 svg 元素有问题，但我不知道出了什么问题

导航栏的 css 文件： * { 框大小：边框框；

}

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:

 <nav class="navbar">
        <div class="brand-title">Hello <?= htmlspecialchars($user["username"]) ?> how are you feeling today</div>
        <a href="#" class="toggle-button">
          <span class="bar"></span>
          <span class="bar"></span>
          <span class="bar"></span>
        </a>
        <div class="navbar-links">
 <ul>
    
    <li><a href="logout.php">Logout</a></li>
    <li><a href="">About</a></li>
    </ul>
</nav>

<link rel="stylesheet" type="text/css" href="./css/index.css">
<div class="svg-container">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1000 1000" width="600px">
  <defs>
    <circle id="c1" stroke-width="250" fill="none" r="375" pathLength="360" stroke-dasharray="30 360"/></defs>
  <g transform="translate(500 500) rotate(-90)" font-size="80" text-anchor="middle" dominant-baseline="middle">
    <a href="#" onclick="updateFeelingText(1)" transform="rotate(0)"><title>ONE</title><use href="#c1" stroke="orange"/><text onclick="displayNumber(1)" transform="rotate(15) translate(375 0) rotate(75)">1</text></a>
    <a href="#" onclick="updateFeelingText(2)" transform="rotate(30)"><title>TWO</title><use href="#c1" stroke="orange"/> <text transform="rotate(15) translate(375 0) rotate(45)">2</text></a>
    <a href="#" onclick="updateFeelingText(3)" transform="rotate(60)"><title>THREE</title> <use href="#c1" stroke="orange"/><text transform="rotate(15) translate(375 0) rotate(15)">3</text></a>
    <a href="#" onclick="updateFeelingText(4)" transform="rotate(90)"><title>FOUR</title><use href="#c1" stroke="orange"/><text transform="rotate(15) translate(375 0) rotate(-15)">4</text></a>
    <a href="#" onclick="updateFeelingText(5)" transform="rotate(120)"><title>FIVE</title><use href="#c1" stroke="orange"/><text transform="rotate(15) translate(375 0) rotate(-45)">5</text></a>
    <a href="#" onclick="updateFeelingText(6)" transform="rotate(150)"><title>SIX</title> <use href="#c1" stroke="orange"/><text transform="rotate(15) translate(375 0) rotate(-75)">6</text></a>
    <a href="#" onclick="updateFeelingText(7)" transform="rotate(180)"><title>SEVEN</title><use href="#c1" stroke="orange"/><text transform="rotate(15) translate(375 0) rotate(-105)">7</text></a>
    <a href="#" onclick="updateFeelingText(8)" transform="rotate(210)"><title>EIGHT</title><use href="#c1" stroke="orange"/><text transform="rotate(15) translate(375 0) rotate(-135)">8</text></a>
    <a href="#" onclick="updateFeelingText(9)" transform="rotate(240)"><title>NINE</title> <use href="#c1" stroke="orange"/><text transform="rotate(15) translate(375 0) rotate(-165)">9</text></a>
    <a href="#" onclick="updateFeelingText(10)"transform="rotate(270)"><title>TEN</title> <use href="#c1" stroke="orange"/> <text transform="rotate(15) translate(375 0) rotate(165)">10</text></a>
    <a href="#" onclick="updateFeelingText(11)"transform="rotate(300)"><title>ELEVEN</title><use href="#c1" stroke="orange"/><text transform="rotate(15) translate(375 0) rotate(135)">11</text></a>
    <a href="#" onclick="updateFeelingText(12)"transform="rotate(330)"><title>TWELVE</title><use href="#c1" stroke="orange"/><text transform="rotate(15) translate(375 0) rotate(105)">12</text></a>
    <a href="#" onclick="updateFeelingText(13)"> <circle r="250" fill="tomato" /><title>THIRTEEN</title><text transform="rotate(90)"> 13 </text></a>
</g>
</svg>
</div>
<script>

以及 svg 的 css 文件：

.svg-container{
    display: flex;
      justify-content: center;
      align-items: center;
     
    
    
  }
  
  

  .svg-container a:hover use {
    stroke: red;  
    
  }
  
  .slider-wrapper {
    
    text-align: center;
   
   
  }

Answer 1

它似乎与

padding-right: 40px;

上的

.brand-title

配合得很好

* {
  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;
  padding-right: 40px;
}

.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;
  }
}

.svg-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.svg-container a:hover use {
  stroke: red;
}

.slider-wrapper {
  text-align: center;
}

<nav class="navbar">
  <div class="brand-title">Hello
    <?= htmlspecialchars($user["username"]) ?> how are you feeling today</div>
  <a href="#" class="toggle-button">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </a>
  <div class="navbar-links">
    <ul>

      <li><a href="logout.php">Logout</a></li>
      <li><a href="">About</a></li>
    </ul>
    </div>
</nav>

<link rel="stylesheet" type="text/css" href="./css/index.css">
<div class="svg-container">
  <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1000 1000" width="600px">
  <defs>
    <circle id="c1" stroke-width="250" fill="none" r="375" pathLength="360" stroke-dasharray="30 360"/></defs>
  <g transform="translate(500 500) rotate(-90)" font-size="80" text-anchor="middle" dominant-baseline="middle">
    <a href="#" onclick="updateFeelingText(1)" transform="rotate(0)"><title>ONE</title><use href="#c1" stroke="orange"/><text onclick="displayNumber(1)" transform="rotate(15) translate(375 0) rotate(75)">1</text></a>
    <a href="#" onclick="updateFeelingText(2)" transform="rotate(30)"><title>TWO</title><use href="#c1" stroke="orange"/> <text transform="rotate(15) translate(375 0) rotate(45)">2</text></a>
    <a href="#" onclick="updateFeelingText(3)" transform="rotate(60)"><title>THREE</title> <use href="#c1" stroke="orange"/><text transform="rotate(15) translate(375 0) rotate(15)">3</text></a>
    <a href="#" onclick="updateFeelingText(4)" transform="rotate(90)"><title>FOUR</title><use href="#c1" stroke="orange"/><text transform="rotate(15) translate(375 0) rotate(-15)">4</text></a>
    <a href="#" onclick="updateFeelingText(5)" transform="rotate(120)"><title>FIVE</title><use href="#c1" stroke="orange"/><text transform="rotate(15) translate(375 0) rotate(-45)">5</text></a>
    <a href="#" onclick="updateFeelingText(6)" transform="rotate(150)"><title>SIX</title> <use href="#c1" stroke="orange"/><text transform="rotate(15) translate(375 0) rotate(-75)">6</text></a>
    <a href="#" onclick="updateFeelingText(7)" transform="rotate(180)"><title>SEVEN</title><use href="#c1" stroke="orange"/><text transform="rotate(15) translate(375 0) rotate(-105)">7</text></a>
    <a href="#" onclick="updateFeelingText(8)" transform="rotate(210)"><title>EIGHT</title><use href="#c1" stroke="orange"/><text transform="rotate(15) translate(375 0) rotate(-135)">8</text></a>
    <a href="#" onclick="updateFeelingText(9)" transform="rotate(240)"><title>NINE</title> <use href="#c1" stroke="orange"/><text transform="rotate(15) translate(375 0) rotate(-165)">9</text></a>
    <a href="#" onclick="updateFeelingText(10)"transform="rotate(270)"><title>TEN</title> <use href="#c1" stroke="orange"/> <text transform="rotate(15) translate(375 0) rotate(165)">10</text></a>
    <a href="#" onclick="updateFeelingText(11)"transform="rotate(300)"><title>ELEVEN</title><use href="#c1" stroke="orange"/><text transform="rotate(15) translate(375 0) rotate(135)">11</text></a>
    <a href="#" onclick="updateFeelingText(12)"transform="rotate(330)"><title>TWELVE</title><use href="#c1" stroke="orange"/><text transform="rotate(15) translate(375 0) rotate(105)">12</text></a>
    <a href="#" onclick="updateFeelingText(13)"> <circle r="250" fill="tomato" /><title>THIRTEEN</title><text transform="rotate(90)"> 13 </text></a>
</g>
</svg>
</div>
<script>