Html5 RNG border

I started learning how to write code within the last few weeks and I have been trying to improve and expand as well as put in to practice some of what I have learned by creating a text-based, web browser game.

The problem I am having is when I create a RNG and try to add a confined border it expands to fill a horizontal section of the webpage.

I have tried using some border measurement instructions but nothing seems to affect it. I have tried searching various web pages for a solution as well but nothing.

I have posted what I have written so far:

<style>
 .bordered {
  width 50px;
  height 50px;
  padding 25px;
  border: 3px solid black;
 }
</style>

<section>
<div class="bordered">
<p id="one"; width 50px;></p>
<button onclick="random()">Random</button>
<script>
 function random(){
document.getElementById("one").innerHTML = Math.floor(Math.random() * 100);
}
</script>

Any suggestions?