positionning a css button under a text - html

Question

i try to put a button under a text using css but i tried different solutions (, white-space: pre-wrap;..) but nothing changes i'm getting the button ( OK ) near the text .
Here's the code:
CSS:
/* Styles for game Help popup */
#popupHelp {
font-family: 'Orbitron', serif;
font-size: 20px;
font-weight: 600;
text-shadow: 0px 1px 2px #fff;
color: #222;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,.5);
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
-webkit-transition: all .5s ease-in;}
#popupHelp h1 {
font-weight: 400;}
#popup-box {
width: 400px;
height: 400px;
background: #ccc url(../images/popup_bg.jpg);
border-radius: 10px;
position: relative;
-webkit-box-shadow: 0 5px 5px #333;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
-webkit-transition: all .5s ease-in;}
#popup-box small {
font-size: .6em;}
/* the type of OK button */
#popup-box a.buttonOk {
background: white;
border-radius: 5px;
display: inline;
font-size: 30px;
margin: 230px auto 0;
padding: 10px;
width: 150px;
border: 3px solid #006438;
color:#006438;
text-decoration:none;}
#popup-box a.buttonOk:hover {
background: #006438;
color:#fff;
text-decoration:none;}
HTML:
<section id="popupHelp" class="hide">
<div id="popup-bg"></div>
<div id="popup-box">
Cards are laid out in a grid face down,
and players take turns flipping pairs of cards over.
On each turn, the player will first turn one card over,
then a second. If the two cards match,
the player scores one point,
the two cards are removed from the game,
and the player gets another turn.
If they do not match, the cards are turned back over.
<div> <p><a id="ok" class="buttonOk" href="">OK</a></p
</div>
</div>
</section>
Any idea please thank u in advance

Answer 1

Quick glance the easiest option seems to be to simply move the button outside of the popup-box div.
<section id="popupHelp" class="hide">
<div id="popup-bg"></div>
<div id="popup-box">
Cards are laid out in a grid face down,
and players take turns flipping pairs of cards over.
On each turn, the player will first turn one card over,
then a second. If the two cards match,
the player scores one point,
the two cards are removed from the game,
and the player gets another turn.
If they do not match, the cards are turned back over.
</div>
<div><p><a id="ok" class="buttonOk" href="">OK</a></p>
</div>
</section>

Answer 2

Did you try taking out the <div>?
also you're missing a ">" at the end of the
<p><a id="ok" class="buttonOk" href="">OK</a></p>