I'm developing a website where I have a centered title containing the name and code of an airport above an image of that airport.

[![Screenshot of website on a large screen](https://i.stack.imgur.com/Vwi2V.png)](https://i.stack.imgur.com/Vwi2V.png)

I have the name and code of the airport separated by an em space:

```css
div.terminal-silhouette-container h3 {
 text-align: center;
}

div.terminal-silhouette-links {
 text-align: center;
 margin-top: 5px;
 margin-bottom: 40px;
}

div.terminal-silhouette-preview {
 max-width: 500px;
 padding: 0;
 margin: 0 auto;
}

img.terminal-silhouette-preview {
 border: 1px solid $color-border;
}
```

```html
<div class="col-lg-6 terminal-silhouette-container">
  <h3>Orlando (International)&emsp;MCO</h3>
 <div class="terminal-silhouette-preview">
      <a href="files/terminal-silhouettes/png/MCO.png">
        <img class="img-responsive terminal-silhouette-preview" src="/assets/projects/terminal-silhouettes/MCO.png" alt="MCO" />
      </a>
    </div>
  <div class="terminal-silhouette-links"><a href="files/terminal-silhouettes/png/MCO.png">png</a> &middot; <a href="files/terminal-silhouettes/svg/MCO.svg">svg</a></div>
</div>
```

This works exactly as I want on larger screens, but when I'm on a narrower mobile screen, the title wraps. Wrapping isn't a problem for me, but because of the em space, one of the lines ends up appearing off-center:

[![Screenshot of website on a phone](https://i.stack.imgur.com/aSjCa.png)](https://i.stack.imgur.com/aSjCa.png)

Is there a way in HTML or CSS to get the browser to treat the em space like a normal space – that is, ignore it (for centering text) if it's at the end of a line?