引入Bootstrap后导航栏宽高异常，如何恢复原有样式并实现垂直居中

问题本质来自两点冲突：

1. 自定义.container类和Bootstrap内置的.container类同名，你的自定义样式被Bootstrap默认样式覆盖
2. Bootstrap的默认样式重置会给h1、ul等原生元素添加默认margin、padding，改变了原有布局的高度计算

• 第一步：解决类名冲突，彻底避免样式覆盖
  把导航容器的类名从container改为自定义的无冲突类名，例如nav-grid-container，修改后的HTML代码如下：

<div id="container-i" class="nav-grid-container">
   <div class="item logo">
    <h1><a class="myName"
      href="index.html">BROOKLYN</a></h1>
   </div>
   <div class="item links">
    <ul class="navigation">
        <li><a href="index.html">Home</a></li>
        <li><a href="about-me.html">About</a></li>
        <li><a href="shop.html">Shop</a></li>
        <li><a href="music.html">Music</a></li>
        <li><a href="tours.html">Tours</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
   </div>
   <div class="item menu">
    <div class="menu-btn">
     <div class="btn-mid"></div>
    </div>
   </div>
</div>

• 第二步：修改对应CSS，添加垂直居中属性，覆盖Bootstrap默认元素样式
  调整后的CSS代码如下，和Bootstrap样式完全隔离不会被覆盖：

/* 自定义导航网格容器 */
.nav-grid-container {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    margin-left: 0;
    margin-right: 0;
    align-items: center; /* 直接实现子元素垂直居中，无需手动计算高度 */
    /* 如需固定导航栏高度，可自行添加 height: 你需要的高度值; */
}
/* 清除Bootstrap给h1加的默认外边距 */
.nav-grid-container .logo h1 {
    margin: 0;
}
/* 清除Bootstrap给ul加的默认内边距、外边距和列表样式 */
.nav-grid-container .navigation {
    margin: 0;
    padding: 0;
    list-style: none;
}

• 第三步：优先级兜底方案
  如果修改后样式仍不生效，可在选择器前加上容器的id提升优先级，例如把.nav-grid-container改为#container-i.nav-grid-container，id选择器优先级高于Bootstrap的类选择器，可保证你的自定义样式100%生效。

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