Website CSS stylesheet not applying completely

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