how to center align this html content - html

Question

I want my html content to be center aligned, while maintaining the column structure of id game-inst
please feel free to edit my css code, waiting for your help, thanks
#score-container {
display: block;
width: 100%;
height: 100%;
text-align: center;
background-color: #1B2631;
color: #ffffff;
}
.key {
width: 40%;
display: inline-block;
}
.instruction {
display: inline-block;
width: 40%;
text-align: left;
}
#my-score,
#high-score,
#game-inst {
font-size: 1.25em;
padding: 0px 10px;
line-height: 1;
}
<div id="score-container">
<div id="game-inst">
<div class="key">Key 4:</div>
<div class="instruction">Move UP</div>
<div class="key">Key 6:</div>
<div class="instruction">Move DOWN</div>
<div class="key">Key 5:</div>
<div class="instruction">PLAY/PAUSE</div>
</div>
<p id="my-score">123</p>
<p id="high-score">786</p>
</div>

Answer 1

I believe this is what you want.
#score-container {
top: 100px;
display: block;
position: relative;
left: 0;
width: 100%;
height: 100%;
text-align: center;
z-index: 10;
}
.key {
width: 30%;
display: inline-block;
float: left;
}
.instruction {
width: 70%;
display: inline-block;
float: left;
}
#score-box {
position: relative;
width: 300px;
margin-left: auto;
margin-right: auto;
padding: 0;
}
#game-inst:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
#my-score,
#high-score,
#game-inst {
font-size: 1.25em;
padding: 0px 10px;
line-height: 1;
text-align: left;
}
#score-box p {
width: 42%;
display: inline-block;
text-align: left;
border: solid 1px silver;
}
<div id="score-container">
<div id="score-box">
<div id="game-inst">
<div class="key">Key 4:</div>
<div class="instruction">Move UP</div>
<div class="key">Key 6:</div>
<div class="instruction">Move DOWN</div>
<div class="key">Key 5:</div>
<div class="instruction">PLAY/PAUSE</div>
</div>
<p id="my-score">123</p>
<p id="high-score">786</p>
</div>
</div>
Note the changes in .key, .instruction, #game-inst and the addition of #game-inst:after
#game-inst:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Which clears the floats added to the key and instruction classes.