导航条两边有一个小空隙

Question

我目前使用bootstrap 5导航条，正如你在图片中看到的，当我按下F12时，它没有完全使用左边的空格，我希望我的元素在左边。我尝试了body{margin:0px和padding:0px，但仍然没有结果…

enter code herehttps://jsfiddle.net/x15ajgkm/#&togetherjs=m57O5uOF5H

这是图片

Answer 1

用margin: 0px代替h2

h2{
margin: 0px;
}

工作的例子:

*{
outline: 1px solid red;
}
.navbar{
font-family: 'Poppins', sans-serif !important;
width: 100%;
background-size: cover;
}
.container{
width: 100%;
}
.container-fluid{
width: 100%;
height: 100%;
}
.container-sm{
width: 100%;

}
.selectreg{
outline: none;
width: 100%;
}
.selectcity{
outline: none;
width: 100%;
}
.selectschool{
outline: none;
width: 75%;
}
.selecttype{

}
.selecttuition{
outline: none;
width: 100%;
}
body{
margin: 0px;
padding: 0px;
}
h2{
margin: 0px;
}

<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light ms-auto">
<div class="container-sm ms-auto">
<div class="region">
<h2><img src="nav img/region.png"alt="" width="50" class="d-inline-block align-text-top">  Region</h2>

<div class="selectreg">

<select id="selectreg">
<option value="1">N/A</option>
<option value="2">Region I (Ilocos Region)</option>
<option value="3">Region II (Cagayan Valley)</option>
<option value="4">Region III (Central Luzon)</option>
<option value="5">Region IV‑A (CALABARZON)</option>
<option value="6">MIMAROPA Region</option>
<option value="7">Cordillera Administrative Region (CAR)</option>
<option value="8">National Capital Region (NCR)</option>
</select>
</div>
</div>
</div> 

<div class="container-sm">
<div class="city">
<h2><img src="nav img/city.png"alt="" width="50" class="d-inline-block align-text-top">  Cities</h2>
<div class="selectcity">
<select id="selectcity" class="selectcity">
<option value="3">N/A</option>
<option value=""></option>
<option value=""></option>
</select>
</div>
</div>
</div>
<div class="container-sm">
<div class="tuition">
<h2><img src="nav img/university.png"alt="" width="50" class="d-inline-block align-text-top">  Tuition Range</h2>
<div class="selecttuition">
<select id="selecttuition" class="selecttuition">
<option value="3">N/A</option>
<option value=""></option>
<option value=""></option>
</select>
</div>
</div>
</div>
<div class="container-sm">
<div class="school">
<h2><img src="nav img/university.png"alt="" width="50" class="d-inline-block align-text-top">  Schools</h2>
<div class="selectschool">
<select id="selectschool" class="selectschool">
<option value="">Public</option>
<option value="">Private</option>
</select>
</div>
</div>
</div>
<div class="container-sm">
<div class="search">
<button class="btn btn-outline-success" type="submit"><img src="nav img/search.png" width="30" class="d-inline-block align-text-top"></button>
</div>
</div>
</nav>
</div>

Answer 2

这是您想要的结果吗?

我对html所做的更改，只有前两行:

<div class="container-fluid  ms-auto d-flex">
<nav class="navbar navbar-expand-lg navbar-light ms-auto flex-column">

我对css所做的更改，只删除了导航栏的宽度:

.navbar{
font-family: 'Poppins', sans-serif !important;
}