HTML/CSS新手求助：如何去除Navbar四周的空白间隙？

我是HTML和CSS的新手，我的Navbar四周存在空白间隙，尝试修改width、height属性以及调整margin和padding都无法解决问题。

现有代码 #

CSS代码 #

* {
  text-decoration: none;
}

.navbar {
  background: rgba(0, 0, 0, 0.6);
  font-family: calibri;
  padding-top: 5px;
  padding-right: 15px;
  padding-left: 15px;
  top: 10;
  left: 0;
  witdth: 100%;
  height: 130px;
  box-sizing: border-box;
  border-bottom: 1px solid #000;
  background-size: cover;
  widtth: cover;
  height: cover;
}

.navdiv {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

li {
  list-style: none;
  display: inline-block;
}

li a {
  color: white;
  font-size: 18px;
  font-weight: bold;
  margin-right: 25px;
}

HTML代码 #

<body background="background.jpg">
        <nav class="navbar">
        <div class="navdiv">
        <div class="logo"><a href="#"><img id="logo" src="views.png" width="12%" height="12%"></a></div>
        <ul>    
        <li><a href ="#">Подписка</a></li>
        <li><a href ="#">Кино</a></li>
        <li><a href ="#">Сериалы</a></li>
        </ul>
    </nav>  

解决步骤 #

1. 清除浏览器默认内外边距
   浏览器会给body、ul等元素设置默认的margin和padding，这是空白间隙的核心来源。修改全局样式：

* {
  text-decoration: none;
  margin: 0;
  padding: 0;
}

2. 修复CSS拼写错误
   navbar类里有两处witdth拼写错误，应改为width；同时width: cover、height: cover是无效属性值，直接删除这两行错误代码。

3. 完善定位属性（可选，若需固定顶部）
   如果希望Navbar固定在顶部，需给navbar添加position: fixed，否则top、left属性不会生效，调整后代码：

.navbar {
  background: rgba(0, 0, 0, 0.6);
  font-family: calibri;
  padding-top: 5px;
  padding-right: 15px;
  padding-left: 15px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 130px;
  box-sizing: border-box;
  border-bottom: 1px solid #000;
  background-size: cover;
}

4. 补全HTML闭合标签
   原HTML中nav和navdiv标签未闭合，补全后避免布局异常：

<body background="background.jpg">
    <nav class="navbar">
        <div class="navdiv">
            <div class="logo"><a href="#"><img id="logo" src="views.png" width="12%" height="12%"></a></div>
            <ul>    
                <li><a href="#">Подписка</a></li>
                <li><a href="#">Кино</a></li>
                <li><a href="#">Сериалы</a></li>
            </ul>
        </div>
    </nav>
</body>

内容的提问来源于stack exchange，提问作者Egor