Is there a straightforward way to horizontally center text that works even when really long words need to stretch out into the surrounding padding?

For example, the following:

**HTML**

```
<section>
   <p>
      Some animals in the wild, like
      hummingbirds, have long names.
   </p>
</section>

```

**CSS**

```
section p {
   width: 75px;
   text-align: center;
   background: gold;
   padding: 20px;
   }

```

Results in "hummingbirds" being off-centered:

[![Off-centered "hummingbirds"](https://i.stack.imgur.com/uOTQa.png)](https://i.stack.imgur.com/uOTQa.png)

If the word "hummingbirds" was properly centered, it would fit nicely within the gold box.

Fiddle with it:  

<https://jsfiddle.net/m6h37q2z/>

**ADDED NOTE #1:**  

This question is NOT about how to remove the padding or reduce the font size or make the box bigger... those are all very easy tweaks (and would break the design). This question is about how to center the word "hummingbirds".

**ADDED NOTE #2:**  

For those who are saying there is not enough room, here's a photoshopped screenshot proving that there is enough room:

[![enter image description here](https://i.stack.imgur.com/Bl11K.png)](https://i.stack.imgur.com/Bl11K.png)