After searching Stackoverflow without finding a solution to my issue, I decided to try something new
Surprisingly, I tried using codepen
<nav>
<button class="btn btn-primary"> signed in as fermi
<img src="https://ui-avatars.com/api/?
name=Fermi+Fang&background=0D8ABC&color=fff&rounded=true">
</button>
</nav>
The text aligns perfectly in the code snippet, but not in the live version
Here's an image of my live code
Take a look at my live code
nav(class="navbar navbar-expand-md fixed-top navbar-light bg-none
px-sm-4 px-0 pr-2")
button(id="container" class="navbar-toggler pr-0 ml-0 pl-3"
type="button" data-toggle="collapse" data-target="#collapsibleNavbar"
style="border-style:none")
span(class="navbar-brand pointer mr-0")
img(class="mr-1 nav-logo-white" src="/images/juu_logo_white.png"
width="33" height="44.5" alt="")
img(class="mr-1 nav-logo-black" src="/images/juu_logo_black.png"
width="33" height="44.5" alt="")
span(id="icon" class="fa fa-angle-down pr-0 mr-0"
style="color:white")
//buttons that are shown in mobile and not collapsed
ul(class="navbar-nav d-inline d-md-none")
if isLoggedIn
div(class="input-group d-inline-flex d-md-none-flex pr-sm-3 pr-
1")
input(type="text" class="form-control nav-search" id="nav-
search" aria-describedby="nav search" placeholder="Search for...")
span(class="input-group-btn")
button(class="btn btn-primary" type="button") <i class="fa
fa-search"></i>
else
li(class="nav-item d-inline")
button(type="button" class="btn btn-primary m-1" data-
toggle="modal" data-target="#signUpModal") Sign Up
li(class="nav-item d-inline mr-sm-3")
button(type="button" class="btn btn-outline-primary m-1" data-
toggle="modal" data-target="#logInModal") Log In
//navbar that collapses or hidden in mobile
div(class="collapse navbar-collapse d-md-flex"
id="collapsibleNavbar")
a(class="navbar-brand d-none d-md-block " href="/")
img(class="mx-1 nav-logo-white ml-3"
src="/images/juu_logo_white.png" width="33" height="44.5" alt="")
img(class="mx-1 nav-logo-black ml-3"
src="/images/juu_logo_black.png" width="33" height="44.5" alt="")
if isLoggedIn
div(class="input-group d-none d-md-inline-flex mr-auto col-lg-6")
input(type="text" class="form-control" id="nav-search" aria-
describedby="nav search" placeholder="Search for...")
span(class="input-group-btn")
button(class="btn btn-primary" type="button") <i class="fa
fa-search"></i>
//shown in non-mobile - will collapse when mobile
ul(class="navbar-nav vertical ml-auto")
li(class="nav-item")
br(class="d-inline d-md-none")
li(class="nav-item ml-3 ml-sm-0 d-inline-block")
button(type="button" class="btn btn-link m-1 btn-mob" data-t
toggle="modal" data-target="#settingsModal") Settings
if isLoggedIn
li(class="nav-item ml-3 ml-sm-0 d-inline-block")
button(type="button" class="btn btn-link m-1 btn-mob" data-
toggle="modal" data-target="#helpModal") Help
li(class="nav-item dropdown d-none d-md-inline-block ml-3 ml-
sm-0")
button(type="button" class="btn btn-link m-1 btn-mob" data-
toggle="dropdown" ) Signed in as #{user.firstname}
ul.dropdown-menu
li(class="nav-item")
button(type="button" class="btn btn-link m-1" data-
toggle="modal" data-target="#userProfileModal") User Profile
li(class="nav-item")
a(role="button" class="btn btn-link m-1" href="/logout")
Log Out
li(class="nav-item ml-3 ml-sm-0 d-inline-block")
button(type="button" class="btn btn-link m-1 btn-mob d-md-
none" data-toggle="modal" data-target="#userProfileModal") User Profile
li(class="nav-item ml-3 ml-sm-0 d-inline-block")
a(role="button" class="btn m-1 btn-mob d-md-none"
href="/logout") Log Out
//hidden in the mobile view
ul(class="navbar-nav mr-2")
if isLoggedIn
else
li(class="nav-item")
button(type="button" class="btn btn-primary m-1 d-none d-md-
block" data-toggle="modal" data-target="#signUpModal") Sign Up
li(class="nav-item")
button(type="button" class="btn btn-outline-primary m-1 d-
none d-md-block" data-toggle="modal" data-target="#logInModal") Log In
Can anyone provide insight into why the text and image alignment in my buttons may be off?
Thank you,