Customizing a Theme and basic CSS is not working

I’ve begun learning how to create my own custom themes, I understand the basics that you need to know, (wp_head and wp_footer and some other functions, using the functions.php to pull in the stylesheet, etc.) and I have a local server set up which is where I’m practicing so I can only upload my code here to demonstrate (unfortunately I don’t yet have it online)

I’m trying to create a basic theme for a static landing page that just says “COMING SOON” in the center of the page, with a border around it, seems pretty straightforward to code, right?
I haven’t gone too far into making my theme work with the WordPress dashboard, so I’m just writing the “coming soon” text into my index.php file in the body tag, around h1 tags inside of a div tag with the class “cm-box”. I haven’t set up any other template than the index.php.

Essentially while I try to use padding, borders, and margins, the padding and the margin is only applying to the top and the bottom, and the border around my text is stretching out to the edge of the page, rather than wrapping itself around my text.

I’ll copy and paste the code from my stylesheet below, I’m struggling to figure out what it is that I need to change in order to fix this problem; If someone could take a look at it and spot the problem that would be a great help. thanks.

P.S. You can check out the website where my new custom theme is going to be uploaded, if you like: stxph.com

Code:
* {
margin: 0;
padding: 0;
}

body {
background-color: #B20000;
margin: 0;

color: #ffb094;
font-family: Arial, sans-serif;
}

.cm-box {
border: 5px #ff6d38 solid;
padding: 10px;
margin: 50% auto;
}

.cm-box h1 {
text-transform: uppercase;
font-size: 8vw;
text-align: center;
}