I am creating a site for a home inspector. I am getting this weird CSS issue that I can't figure out.

Steps To Reproduce

1. Launch site as an iPhone/Android in Portrait Mode (iPhone 8 or iPhone SE) (Max Width: 400). (On the iPhone 8 Plus, the last letter overlaps the info button)
2. The name of the company is below the NavBar (when it should be in the white space)

Website with issue: <http://oneorangetree.com/index.html>

[![iPad CSS issue](https://i.stack.imgur.com/tFC9T.png)](https://i.stack.imgur.com/tFC9T.png)
[![iPhone 8 Plus Portrait CSS Issue](https://i.stack.imgur.com/nthsE.png)](https://i.stack.imgur.com/nthsE.png)
[![iPad mini](https://i.stack.imgur.com/gMenL.png)](https://i.stack.imgur.com/gMenL.png)
[![iPhone SE CSS Issue](https://i.stack.imgur.com/W55aC.png)](https://i.stack.imgur.com/W55aC.png)

\*there maybe other issues that I have not discovered yet

I could paste my CSS file but I think it has something to do with .brand-name

```
@media(min-width:1400px){
    .rd-navbar-default .rd-navbar-static .rd-navbar-brand .brand-logo{
        width:57px;
        height:57px
    }
    .rd-navbar-default .rd-navbar-static .rd-navbar-brand .brand-name{
        margin-left:10px
    }
    .rd-navbar-default .rd-navbar-static .rd-navbar-brand .brand-name span:nth-child(1){
        font-size:54px;
        line-height:38px
    }
    .rd-navbar-default .rd-navbar-static .rd-navbar-brand .brand-name span:nth-child(2){
        margin-top:9px;
        font-size:14px;
        line-height:10px
    }
}

.rd-navbar-default .rd-navbar-static.rd-navbar--is-stuck .rd-navbar-brand .brand-logo,.rd-navbar-default .rd-navbar-static.rd-navbar--is-clone .rd-navbar-brand .brand-logo{
    width:34px;
    height:34px
}
.rd-navbar-default .rd-navbar-static.rd-navbar--is-stuck .rd-navbar-brand .brand-name,.rd-navbar-default .rd-navbar-static.rd-navbar--is-clone .rd-navbar-brand .brand-name{
    margin-left:6px
}
.rd-navbar-default .rd-navbar-static.rd-navbar--is-stuck .rd-navbar-brand .brand-name span:nth-child(1),.rd-navbar-default .rd-navbar-static.rd-navbar--is-clone .rd-navbar-brand .brand-name span:nth-child(1){
    font-size:32px;
    line-height:23px
}
.rd-navbar-default .rd-navbar-static.rd-navbar--is-stuck .rd-navbar-brand .brand-name span:nth-child(2),.rd-navbar-default .rd-navbar-static.rd-navbar--is-clone .rd-navbar-brand .brand-name span:nth-child(2){
    margin-top:5px;
    font-size:8px;
    line-height:6px
}

.rd-navbar-default .rd-navbar-fullwidth .rd-navbar-brand .brand-logo{
    width:34px;
    height:34px
}
.rd-navbar-default .rd-navbar-fullwidth .rd-navbar-brand .brand-name{
    margin-left:6px
}
.rd-navbar-default .rd-navbar-fullwidth .rd-navbar-brand .brand-name span:nth-child(1){
    font-size:32px;
    line-height:23px
}
.rd-navbar-default .rd-navbar-fullwidth .rd-navbar-brand .brand-name span:nth-child(2){
    margin-top:5px;
    font-size:8px;
    line-height:6px
}

```

I am relatively new to front end web development.