Brandon Bradley Brandon Bradley - 28 days ago 6
CSS Question

Why Is Wrapped Text Off by 1 Space?

I'm using a centered navbar-brand in Bootstrap 3, and when viewed on a phone sized screen, the text wraps, but the top line has a leading space, whereas the bottom does not, leading to their being misaligned.

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html" id="title-card">Testing Testing</a>
</div>
</div>
</nav>


In this example, "title-card" sets the font-size to 2em; and navbar-brand along with navbar-header were modified to be:

.navbar-header {
float: left;
padding: 15px;
text-align: center;
width: 100%;
}

.navbar-brand {
float: none;
}


This produces the following output:

Testing is not aligned with the Testing below it.

How would one go about aligning them?

Answer

Give a margin:0 and padding:0 to your #title-card.

#title-card {
margin: 0; 
padding: 0;
}