Fixing spacing issues

HTML-CSS
#1

How would I fix these spacing issues when text is added in?

If you click on one of the links on the page, it’ll open into another window where you’ll be able to see the spacing issue I’m talking about.

These numbers when text is added in should be closer together.

font-size: 22px; Is adding the green background past its borders which shouldn’t be happening. Which is causing it to be uneven when the whole thing is centered in the middle.

Text Added:
https://jsfiddle.net/xeqtcp5k/10/

90 top

111 Bottom

CSS

.wrap {
  display: table;
  margin: 0 auto;
  background: green;
}

.inner p {
  width: 300px;
  height: 100%;
  border: 1px solid red;
  font-weight: 900;
  font-style: normal;
  font-size: 22px;
  font-family: "Times New Roman", Times, serif;
  padding: 5px;
  color: #0059dd;
}

<div class="wrap">
  <div class="inner">
    <p><span>Text, text, text, Text, text, text, Text, text, text, Text, text, text, Text, text, text</span></p>
  </div>
</div>

Text Removed:
https://jsfiddle.net/xeqtcp5k/4/

157 Top

156 Bottom

#2

Removing the p and the span seems to have fixed it.
https://jsfiddle.net/xeqtcp5k/13/

.wrap {
  display: table;
  margin: 0 auto;
  background: green;
  margin-top:22px;
}

.inner  {
  width: 300px;
  height: 100%;
  border: 1px solid red;
  font-weight: 900;
  font-style: normal;
  font-size: 22px;
  font-family: "Times New Roman", Times, serif;
  padding: 5px;
  color: #0059dd;
}

<div class="wrap">
  <div class="inner">
    Text, text, text, Text, text, text, Text, text, text, Text, text, text, Text, text, text
  </div>
</div>
#3