My css is not centering. Is there a way around this?

I am making a text editor, and I have a work counter. I want to center the word counter in my popup box, and it is not centering. Here is the code:

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
body {
    font-family: Montserrat, sans-serif;
}
h1{
  -webkit-user-select: none; 
  -ms-user-select: none; 
  user-select: none;
  text-align : center;
}
article {
  text-align : justify;
    overflow:auto;
    line-height: 1.5;
  height : 70vh;
  margin : auto;
  font-family: Montserrat, sans-serif;
outline : none;
  width : 85%;
}
.outer {
    display : flex;
}
.pops {
  padding : 0px 15px;
}
.pop span {
  text-align:center;
  font-size : 20px;
  color : #444;
text-align: center;
}

.pop{
  transition: .5s;
  width: 120px;
  height : 70px;
  border-radius: 5px;
  border: 1px solid #BFBFBF;
  background-color: white;
  
}
.pop:hover {
  background-color : #eae8ff;
}

html:

<h1> StreamLine </h1>
<div class = "outer"> 
<article class = "child" id = "text" data-gramm="false"
data-gramm_editor="false"
data-enable-grammarly="false" contenteditable = "true" spellcheck = "true"> Write your amazing words here! </article>
  <div class = "pops" > <div class = "pop"> <span class = "inner" id="words">0</span></div></div>
</div>
 

I wanted the text in the

.pop span

to center, but it didn't. Instead, it stayed at the edge. Does anyone know why this happened? If so, please reply.

add the following to your CSS at ".pop span":

display: flex;
justify-content: center;