без bootstrap панель навигации работает отлично, но когда я активирую bootstrap панель навигации глючит вот как она должна выглядеть: 
вот как она выглядит с bootstrap: 
Я думаю, что есть что-то, что нуждается в добавлении !important к нему, но я не уверен, что так, пожалуйста, можете кто-нибудь с опытом сказать мне, какой? я попробовал inline-flex, но все еще без надежды, я попытался !important с шириной, но все еще не работает, я попробовал height: 0%!important;, и все еще ничего не работает, мне нужно использовать загрузочный ремешок, чтобы таблица с дизайном bootstrap так удаление bootstrap не вариант.
хорошо, поэтому я не уверен, есть ли другая проблема, как эта, но не могу найти ответ, поэтому вот мой код:
html {
scroll-behavior: smooth;
}
#extra space {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#section2 {
color: #fff;
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
text-align: center;
padding: 5em 0 5em 0;
margin: 0;
background-size: 125% auto;
}
#section2 header {
margin: 0 0 2em 0;
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav {
position: sticky;
top: 0;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 12vh;
background-color: #0c0c0c;
overflow: auto;
}
.logo {
color: whitesmoke;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 22px;
}
.nav-links {
display: flex!important;
justify-content: space-around!important;
width: 100%!important;
}
.nav-links li {
list-style: none;
}
.burger div {
width: 25px;
height: 5px;
background-color: whitesmoke;
margin: 3px;
}
.burger {
display: none;
cursor: pointer;
}
.nav-links a {
color: whitesmoke;
text-decoration: none;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 14px;
}
@media screen and (max-width:1024px) {
.nav-links {
display: inline-flex;
justify-content: space-around;
width: 60%;
}
}
@media screen and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav {
position: fixed;
top: 0;
}
.nav-links {
font-size: 1px;
position: fixed;
right: 0px;
height: 92vh;
top: 0px;
background-color: #0c0c0c;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {}
.burger {
display: block;
position: absolute;
top: 8px;
right: 16px;
}
.nav-active {
transform: translateX(0%);
}
}
#section1 {
background-image: url("background6.png");
background-position: center center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-size: cover;
background-color: black;
}
#section2 {
background-image: url("background image venuto4.jpg");
height: 980px;
width: 100%;
}
#section3 {
background-color: black;
height: 700px;
}
#section4 {
background-color: whitesmoke;
height: 700px;
}
#section5 {
background-color: yellow;
height: 700px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE HTML>
<!--
Overflow by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Overflow by HTML5 UP</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="navmain.css" />
<link rel="stylesheet" href="css/bootstap.css">
<script src="https://kit.fontawesome.com/703d63b52b.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<div class="logo">
<h4>thomas<br> venutu</h4>
</div>
<ul class="nav-links">
<li><a href="#">home</a></li>
<li><a href="#section2">NextEvent</a> </li>
<li><a href="index">Music </a> </li>
<li><a href="index">About</a> </li>
<li><a href="index">Boooking</a> </li>
</ul>
<div class="burger">
<div class="line2"></div>
<div class="line1"></div>
<div class="line3"></div>
</div>
</nav>
<section id="section1">
</section>
<section id="section2">
<header>
<h1> </h1>
<h2>Next event</h2>
<h3>Venue At:</h3>
<h4>TBA</h4>
</header>
<div id="getting-started">
<div class="container">
<div class="row">
<div class="col-md-4 m-auto offset-lg-3 col-lg-5">
<div class="card">
<div class="card-header">
<div class="card-body">
<table class="table" summary="date and time for the next event">
<tr>
<th>Days</th>
<th>Hours</th>
<th>Minutes</th>
</tr>
<tr>
<td id="day" class="display-4"></td>
<td id="hours" class="display-4"></td>
<td id="minutes" class="display-4"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.countdown.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/main2.js"></script>
<!--conection to main.js !-->
</section>
<section id="section3">
<h1>About</h1>
</section>
<section id="section4">
<h1>Music</h1>
<article class="container box style2">
<div class="row gtr-0">
<div class="col-3 col-12-mobile">
<a href="icon brands fa-facebook-f" class="image fit"><img src="images/venuto/1798697_10202102944072424_1617307970_n.jpg" alt="" title="still in proggress" /></a>
</div>
<div class="col-3 col-12-mobile">
<a href="images/fulls/06.jpg" class="image fit"><img src="images/venuto/1898181_10202102918071774_1708501880_n.jpg" alt="" title="still in proggress" /></a>
</div>
<div class="col-3 col-12-mobile">
<a href="images/fulls/07.jpg" class="image fit"><img src="images/venuto/1901776_10202102917311755_760656742_n.jpg" alt="" title="still in proggress" /></a>
</div>
<div class="col-3 col-12-mobile">
<a href="images/fulls/08.jpg" class="image fit"><img src="images/venuto/10275374_10202690394478317_8154904436564081527_o.jpg" alt="" title="still in proggress" /></a>
</div>
</div>
</article>
</section>
<div id="section5"></div>
<section>
<h1>home</h1>
</section>
<script src="navbarjs.js"></script>
</body>
</html>
ответ: вам нужно сделать bootstrap nav_bar
хорошо, если вы будете искать в ответах ниже, вы найдете мой принятый ответь как хороший navbar