Why isn't my navbar text on the same line?

Why is my navbar text not on the same line for the “front end web developer” and my pages text. How can I make it appear on the same line?
As you can see in the screenshot, it currently looks like this https://ibb.co/jkd0LS. I want the text to be all on the same line.

jQuery(document).ready(function($) {
  $(document).on("scroll", function() {
    const features_top = $(".features-icons").position().top;
    const top_of_window = $(window).scrollTop();

    if (top_of_window >= features_top) {
    } else {
.navbar {
  border-bottom: 0.04rem solid #111;
  background-color: ;
  display: none;

nav ul li a {
  color: rgb(65, 47, 47);
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  text-transform: uppercase;

nav ul li a:hover {
  text-decoration: underline;
  color: #000;

.abs-center-x {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Navigation bar -->
<nav class="navbar scrolled-nav navbar-expand-md fixed-top navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Front End Web Developer</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar7">
                <span class="navbar-toggler-icon"></span>
  <div class="navbar-collapse collapse justify-content-stretch" id="navbar7">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active"> <a class="nav-link" href="#home">Home</a>
      <li class="nav-item">
        <a class="nav-link active" href="#features-icons">Expectations</a>
      <li class="nav-item active"> <a class="nav-link" href="#testimonials">Testimonials</a>
      <li class="nav-item"> <a class="nav-link" href="#about">About</a>
      <li class="nav-item"> <a class="nav-link" href="#portfolio">Portfolio</a>
      <li class="nav-item"> <a class="nav-link" href="#about">Design</a>
      <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a>

Here is all my website code, I uploaded it to GitHub

hi @ldocherty1,


// replace
$(".navbar").show(); // display: block
// with
$('.navbar').css('display', 'flex') // display: flex
1 Like