Items with in a div move after JS event - html

Question

I'm having some CSS styling issues.
Firstly, excuse the poor styling - I've just sorted out the logic of the game and am now working on the styling
The game is a simple game of rock paper scissors. And everytime I click on a square (which represents either rock paper scissors), the game logic is run and either you or the computer player get a point. Once both players get their score updated, the items with the div stripe get pushed up in the div.
I'm not sure if this a html/css issue, or an issue with JS - but what I'd like is the items with the stripe div to remain center at all times.
I've included images to show you what I mean - As I'm sure what I said is confusing you all.
Cheers
Code:
body {
margin: 0;
font-family: "Montserrat", "Avenir";
}
#header {
line-height: 1.1;
text-align: center;
margin: 0;
font-weight: normal;
text-transform: uppercase;
}
#stripe {
text-align: center;
width: 100%;
margin: 0 auto;
height: 50px;
}
#reset {
width: 5%;
}
#message {
display: inline-block;
width: 10%;
}
#yourScore {
display: inline-block;
width: 2%;
}
#compScore {
display: inline-block;
width: 2%;
}
.option {
width: 30%;
background: steelblue;
padding-bottom: 30%;
float: left;
margin: 1.66%;
border-radius: 25px;
transition: background .5s;
-webkit-transition: .5s;
-moz-transition: .5s;
}
#buttons {
margin: 20px auto;
max-width: 600px;
}
<div id="header">
<h1>Rock Paper Scissors</h1>
</div>
<div id="stripe">
<button id="reset">Reset</button>
<span id="message"><p></p></span>
<span id="yourScore" data-value="0"><p>0</p></span>
<span id="compScore" data-value="0"><p>0</p></span>
</div>
<div id="buttons">
<div id="rock" class="option">rock</div>
<div id="paper" class="option">paper</div>
<div id="scissors" class="option">scissors</div>
</div>

Answer 1

As mentioned in the comments, you are probably loosing the ps when updating the inner html of #message #yourScore and #compScore.
I would suggest you remove all the ps from within the stripe and change the stying to add some top/bottom paddings:
#stripe {
text-align: center;
width: 100%;
padding: 15px 0;
}