Not Aligning Itself In Center Of Container

, and are all inside one container. I've used align-items-center to align them all in the same line inside the container. However that property is not applying to the tag. What

Solution 1:

Bootstrap 4 paragraphs <p> have a bottom margin. Use the mb-0 class to remove it.

<pstyle="padding-right: 0.5em; padding-left: 0.5em;"class="my-0"> or </p>

https://www.codeply.com/go/n337ATFcOh

---

You could simplify the markup and CSS a lot by utilizing the Bootstrap Navbar or Nav. There is also no reason to use nested containers.

https://www.codeply.com/go/ZiTM3iuHrd

Solution 2:

You have a margin set to p element. Just remove it and you are good to go:

navul{
    padding: 0;
    display: flex;
    margin-bottom: 0;
}
navli{
    list-style: none;
    padding: 00.2em;
}
nava{
    text-decoration: none;
}
#login{
    display: inline-block;
    min-width: max-content;
    max-height: min-content;
    margin: 0;
}

navp {
  margin: 0;
}

<linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous"><nav><divclass="container d-flex align-items-center justify-content-between "><divclass="container d-flex align-items-center "><ul><li><ahref="#">Home</a></li><li><ahref="#">Services</a></li><li><ahref="#">Contact Us</a></li><li><ahref="#">About Us</a></li></ul></div><divclass="container-flex d-flex align-items-center"><ahref="#"style="white-space: nowrap">Sign up</a><pstyle="padding-right: 0.5em; padding-left: 0.5em;"> or </p><buttonclass="btn btn-success btn-md"id="login">Log in</button></div></div></nav>

Solution 3:

you also use margin-bottom:0

or

Solution 4:

.mb-0{margin-bottom:0px;}

<pstyle="padding-right: 0.5em; padding-left: 0.5em;"class="mb-0"> or </p>

Solution 5:

add margin-top in p tag as below:

navul{
        padding: 0;
        display: flex;
        margin-bottom: 0;
    }
    navli{
        list-style: none;
        padding: 00.2em;
    }
    nava{
        text-decoration: none;
    }
    #login{
        display: inline-block;
        min-width: max-content;
        max-height: min-content;
        margin: 0;
    }

<linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous"><nav><divclass="container d-flex align-items-center justify-content-between "><divclass="container d-flex align-items-center "><ul><li><ahref="#">Home</a></li><li><ahref="#">Services</a></li><li><ahref="#">Contact Us</a></li><li><ahref="#">About Us</a></li></ul></div><divclass="container-flex d-flex align-items-center"><ahref="#"style="white-space: nowrap">Sign up</a><pstyle="padding-right: 0.5em; padding-left: 0.5em; margin-top: 15px;"> or </p><buttonclass="btn btn-success btn-md"id="login">Log in</button></div></div></nav>