Unable to style 'submit' button - html

Question

I am creating my own website and I've came to a strange problem.
I am using CSS and HTML while asking this question (respectively on my web); I m using Mozilla Firefox 66, the Developer version (just has some more web tools etc.)
So, I have a index.html, and index.css, in the index.html it is linked to the index.css <link rel="stylesheet" href="./css/index.css" type="text/css">.
Everything worked until I decided to customize my submit button:
<input type="submit" id="submit" value="Register!">
Basically, I've put this in my CSS (index.css) like I would always do:
#submit{
display: block;
font-size: 30px;
width: 600px;
height: 60px;
}
The thing is. This does not affect the submit button in any way. The strange thing is, if I did:
#registerName, #registerMail, #registerPass, #submit{
display: block;
margin-left: auto;
margin-right: auto;
font-size: 30px;
width: 600px;
height: 60px;
};
it would affect the button (and of cource registerName etc.). And I think, what the hell?
So, after searching up on here (StackOwerflow of course :) ), I found people doing some methods such as putting it directly into the button (<input type="submit" value="Register!" style="width:600px;height:60px;") worked, but not what I wanted, also things like input.submit(if I replaced id with class) which didn't work. I don't know. This seems like a strange bug or something.
So, all in all: When I simply do #submit{} in the CSS, it does not actually affect the submit id. Although if mentioning more of them (like #submit, #user, #phone{}), it does affect it. Is this a bug or something?
PS: Sorry for the long post, I am new here, and I wanted to explain fully for you to understand

Answer 1

If the css style sheet you have shown us looks like below, the ";" after the first declaration block is going to cause the second selector and declaration block to fail.
#registerName, #registerMail, #registerPass, #submit{
display: block;
margin-left: auto;
margin-right: auto;
font-size: 30px;
width: 600px;
height: 60px;
};
#submit{
display: block;
font-size: 30px;
width: 600px;
height: 60px;
}

Answer 2

Use button instead of input.
#submit {
display: block;
font-size: 30px;
width: 600px;
height: 60px;
}
<button type="submit" id="submit">Register!</button>
Why does it work on the group styling? Hard to say without having the whole CSS. My best guess is that something else is applied in between, like a border. For example, you can make the CSS work with input by setting any valid value to the border attribute.
#submit {
display: block;
font-size: 30px;
width: 600px;
height: 60px;
border: 1px solid lightgrey;
}
<input type="submit" id="submit" value="Register!"></input>