How to stop auto enter in css?

I'm pretty noob in html and css since I just started. I'm trying to implement something in a creation but I don't know to delete the auto enters in the title.

@import url(https://fonts.googleapis.com/css?family=Fjalla+One);


html{
  height: 100%;
}

body{
  font-family: 'Fjalla One', sans-serif;
  background: linear-gradient(to bottom, #405166 0%, #656f6f 100%);
}

.container{
  margin: auto;
}


h1{
  text-transform: uppercase;
  font-size: 42px;
  line-height: 47px;
  letter-spacing: 2px;
  text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px;
  text-align: center;
}


.title{
  transform: translateX(-50%) rotate(-5deg);
  display: block;
  margin-left:50%;


}

<body>
  <section class="container">
  <h1>
    <br />
    <span class="title" style="color:#e55643;">Burger</span>
    <span class="title" style="color:#2b9f5e;">school</span>
    <span class="title" style="color:#f1c83c;">afspraken</span>
  </h1>
</section>

</body>

I'd like to have burger and school next to each other without deleting the colors.

enter image description here

Solution

try this,... not sure this is what you wanted

<body>
  <section class="container">
  <h1>
    <br />
    <span class="title" >
       <label style="color:#e55643;">Burger</label>
       <label style="color:#2b9f5e;">school</label>
    </span>
    <span class="title" style="color:#f1c83c;">afspraken</span>
  </h1>
</section>

</body>

////////to remove space between labels do this.

<body>
  <section class="container">
  <h1>
    <br />
    <span class="title" >
       <label style="color:#e55643;">Burger</label><label style="color:#2b9f5e;">school</label>
    </span>
    <span class="title" style="color:#f1c83c;">afspraken</span>
  </h1>
</section>

remove the space between label it should be on same line without space