Html5 RNG border - html

Question

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?

Answer 1

The problem is that you have invalid HTML / CSS:
Your line of code <p id="one"; width 50px;></p> has a few errors; attributes should not have semicolons after them, and you width needs an equals sign. Ideally it would have quotation marks as well, as <p id="one" width="50px"></p>. Also note that setting inline rules like this is generally considered bad practise, and they carry the second-highest level of specificity. CSS should be used in most cases instead.
Your CSS rules need to have colons separating the properties from their values. For example, width 50px should be width: 50px.
Both the inline style and the CSS styles are invalid, and subsequently neither attempt to set width to 50px is getting applied. Because the element is block-level, it expands to the maximum width by default.
Fixing up the above two issues will confine your border's width, though as an additional nitpick you should avoid using the inline event handler onclick. Instead, you should separate the markup form the logic by making use of JavaScript's addEventListener() method.
This can all be seen in the following:
document.getElementsByTagName('button')[0].addEventListener("click", function() {
document.getElementById("one").innerHTML = Math.floor(Math.random() * 100);
});
.bordered {
width: 50px;
height: 50px;
padding: 25px;
border: 3px solid black;
}
<section>
<div class="bordered">
<p id="one"></p>
<button>Random</button>
</div>
</section>
Hope this helps!