How to set the text in a footer center?

How to set the text in a footer center?


when I was editing the footer, I want to set the text"Sarah [email protected]" center.
This is my code:

        <div id="footer" class="bg-primary">
                <div class="navbar navbar-fixed-bottom">
                    <div class="container">
                        <p class="text-center">Sarah [email protected]</p>

but the result is:

please give me some help!Thanks!


Do you have a codepen link?


this is the link:

I have not finished the page,so it is a debug version.

Thanks a lot!


The <div class="navbar navbar-fixed-bottom"> turns the container div into a flex container, so the width of the <p> inside only takes as much as it needs (and any text centering would have no noticeable effect). Try removing the navbar div, then change the <p>'s class to text-center.

After that the <p>'s bottom margin will “leak out” of the div, causing a white area at the bottom. You can remove this by setting the container div’s bottom padding to some value.