Navigation Bar Problem while decreasing screen width - html

Question

I am trying to create navbar with image logo, Title, Navigation Links and some social links also. I have created 4 divs for each. Whenever I decrease the screen width using responsive a white color appears in the nav bar and increases to the left as i decrease the screen width.
Here are some pics also:
You can aslo see width on top of the picture
Here the problem as i decreases the screen width
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#font-face {
font-family: PollerOne;
src: url('../../fonts/Poller_One/PollerOne-Regular.ttf');
}
/* Styling Navigation Bar */
#navbar {
display: flex;
position: relative;
align-items: center;
height: 65px;
width: 100%;
}
#navbar::before {
content: "";
position: absolute;
background-color: #262626;
height: 65px;
width: 100%;
z-index: -2;
}
.navbar {
color: white;
margin: 7px 7px;
}
/* Styling Logo */
#logo {
background-color: black;
height: 45px;
width: 45px;
min-width: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
#logo img {
filter: invert();
width: 25px;
}
/* Styling Title */
#title {
font-family: PollerOne;
min-width: 160.5px;
font-size: 1.4rem;
margin-left: 0px;
}
/* Styling Nav links */
#nav-links {
margin: 0 auto;
}
#nav-links ul {
list-style-type: none;
display: flex;
}
.nav-links {
font-size: 20px;
margin: 0 20px;
/* padding: 5px 10px; */
position: relative;
cursor: pointer;
}
/* Animation Under Nav Links */
.nav-links::after {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -4px;
background: linear-gradient(white 0 0) center/0% 100% no-repeat;
display: block;
}
:hover.nav-links::after {
animation: pulse 300ms linear;
animation-fill-mode: forwards;
}
#keyframes pulse {
to {
background-size: 100% 100%;
}
}
/* Styling Social Links */
#social-links {
margin-left: auto;
display: flex;
}
.social-links {
width: 30px;
height: 30px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 5px;
}
.social-links img {
width: 27px;
transition: all 200ms ease;
}
.social-links img:hover {
transform: scale(1.5)
}
/* Utility Class */
<div id="navbar">
<div id="logo" class="navbar">
<img src="./img/bag.png" alt="">
</div>
<div id="title" class="navbar">Meals Point</div>
<div id="nav-links" class="navbar">
<ul>
<li class="nav-links"><a id="link-1">Home</a></li>
<li class="nav-links"><a id="link-2">About</a></li>
<li class="nav-links"><a id="link-3">Services</a></li>
<li class="nav-links"><a id="link-4">Recipes</a></li>
<li class="nav-links"><a id="link-5">Contact</a></li>
</ul>
</div>
<div id="social-links" class="navbar">
<a class="social-links" href="https://www.twitter.com"><img src="./img/twitter.png" id="link-1"></a>
<a class="social-links" href="https://www.facebook.com"><img src="./img/facebook.png" id="link-2"></a>
<a class="social-links" href="https://www.instagram.com"><img src="./img/instagram.png" id="link-3"></a>
</div>
</div>

Answer 1

Try to add to #navbar float: left; :
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#font-face {
font-family: PollerOne;
src: url('../../fonts/Poller_One/PollerOne-Regular.ttf');
}
/* Styling Navigation Bar */
#navbar {
display: flex;
position: relative;
align-items: center;
height: 65px;
min-width: 100%;
float: left;
}
#navbar::before {
content: "";
position: absolute;
background-color: #262626;
height: 65px;
min-width: 100%;
z-index: -2;
}
.navbar {
color: white;
margin: 7px 7px;
}
/* Styling Logo */
#logo {
background-color: black;
height: 45px;
width: 45px;
min-width: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
#logo img {
filter: invert();
width: 25px;
}
/* Styling Title */
#title {
font-family: PollerOne;
min-width: 160.5px;
font-size: 1.4rem;
margin-left: 0px;
}
/* Styling Nav links */
#nav-links {
margin: 0 auto;
}
#nav-links ul {
list-style-type: none;
display: flex;
}
.nav-links {
font-size: 20px;
margin: 0 20px;
/* padding: 5px 10px; */
position: relative;
cursor: pointer;
}
/* Animation Under Nav Links */
.nav-links::after {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -4px;
background: linear-gradient(white 0 0) center/0% 100% no-repeat;
display: block;
}
:hover.nav-links::after {
animation: pulse 300ms linear;
animation-fill-mode: forwards;
}
#keyframes pulse {
to {
background-size: 100% 100%;
}
}
/* Styling Social Links */
#social-links {
margin-left: auto;
display: flex;
}
.social-links {
width: 30px;
height: 30px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 5px;
}
.social-links img {
width: 27px;
transition: all 200ms ease;
}
.social-links img:hover {
transform: scale(1.5)
}
/* Utility Class */
<div id="navbar">
<div id="logo" class="navbar">
<img src="./img/bag.png" alt="">
</div>
<div id="title" class="navbar">Meals Point</div>
<div id="nav-links" class="navbar">
<ul>
<li class="nav-links"><a id="link-1">Home</a></li>
<li class="nav-links"><a id="link-2">About</a></li>
<li class="nav-links"><a id="link-3">Services</a></li>
<li class="nav-links"><a id="link-4">Recipes</a></li>
<li class="nav-links"><a id="link-5">Contact</a></li>
</ul>
</div>
<div id="social-links" class="navbar">
<a class="social-links" href="https://www.twitter.com"><img src="./img/twitter.png" id="link-1"></a>
<a class="social-links" href="https://www.facebook.com"><img src="./img/facebook.png" id="link-2"></a>
<a class="social-links" href="https://www.instagram.com"><img src="./img/instagram.png" id="link-3"></a>
</div>
</div>

Answer 2

Try to add
For Left Align:class = "navbar-nav mr-auto"
For Right Align:class = "navbar-nav ml-auto"
For Center Align:class = "navbar-nav mx-auto"