Help needed. Navbar items are getting wrapped when i use container-fluid

1 
<header>
<nav class="navbar navbar-dark bg-dark fixed-top navbar-expand-sm">
  <div class="container-fluid">
     <div class="navbar-header">
          <a class="navbar-brand" href="#">Product Manager's Maker Studio</a>
          <ul class="nav navbar-nav">
     
              <li><a class="navbar-brand" href="#">About</a></li>
              <li><a class="navbar-brand" href="#">Portfolio</a></li>
              <li><a class="navbar-brand" href="#">Contact</a></li>
      
         </ul>
    </div>
  </div>
</nav> 
</header>

P.S. Struggled with the back tick a bit. Hope i’ve gotten it right.

3

Thanks for your quick response Randall. Here’s my complete code.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<header>
<nav class="navbar navbar-dark bg-dark fixed-top navbar-expand-sm">
  <div class="container-fluid">
    <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
        </button>
       
          <a class="mylogo navbar-brand" href="#">PM's Maker Studio</a>
          <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav navbar-right">

                        <li><a class="active" href="#">About</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Contact</a></li>

                   </ul>
          </div>
     </div> 
  </div>
</nav> 
</header>
4

also, bootstrap 4.0 and CSS is as follows

.mylogo
{
  font-family:Verdana;
  font-size:30px;
}
5

portfolio
portfolio1910×563 11.5 KB

The text appears blue for About, Portfolio and Contact, despite writing a CSS mylogo function to override it.

Am using Bootstrap 4.0

6

Next i tried doing two things

  1. nesting the div class=container-fluid inside my nav element (no change)
  2. changing container-fluid to container (just moved my logo over to the right a little bit)