Website CSS stylesheet not applying completely - html

Question

Ok someone help me with creating my first website. The problem is that the stylesheet only applies partly.
My body
<div class="top1">
<h1 align="left" class="1logo">La Di Da DI</h1>
<h1 align="left" class="2logo">we likes to party</h1></div>
</body>
My stylesheet
html, body {
margin: 0px;
padding: 0px;
outline-offset: 0px;
background-color: #FFEAE5;
}
.mainTitle{
display: inline;
}
.2logo {
display: inline;
color: #FFEAE5;
font-size: 18px;
font-style: italic;
}
.1logo {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
display: inline;
color: #FFEAE5;
}
.top1 {
padding: 5px;
padding-top: 3px;
padding-left: 25px;
background-color: #F87666;
}
Stylesheet link
<link href="main.css" content"text/css" rel="stylesheet">

Answer 1

Using a number at the starting of the class is not a good practice because it takes a different approach to apply css to that kind of class...
Try to remove the numbers from the starting and put it at end like:
HTML
<div class="top1">
<h1 align="left" class="logo1">La Di Da DI</h1>
<h1 align="left" class="logo2">we likes to party</h1>
</div>
CSS
html,
body {
margin: 0px;
padding: 0px;
outline-offset: 0px;
background-color: #FFEAE5;
}
.mainTitle {
display: inline;
}
.logo2 {
display: inline;
color: #FFEAE5;
font-size: 18px;
font-style: italic;
}
.logo1 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
display: inline;
color: #FFEAE5;
}
.top1 {
padding: 5px;
padding-top: 3px;
padding-left: 25px;
background-color: #F87666;
}
If you are looking for a solution that how to apply css to class that starts from a number see this answer