float não esta funcionando

<div class="botoes">
        <a class="btn-floating btn-large waves-effect waves-light red"  id="botao-reininciar" >
        <i class="material-icons">restore</i>
      </a>
      <a id="botao-placar" class="btn-floating btn-large waves-effect waves-light green">
      <i class="material-icons">assignment</i>
    </a>
    <a id="botao-frase" class="btn-floating btn-large waves-effect waves-light blue">
    <i class="material-icons">shuffle</i>
  </a>
  <a class="btn-floating btn-large waves-effect waves-light cyan"  id="botao-frase-id">
  <i class="material-icons">repeat_one</i>
</a>
  <input type = "number" id = "number" min ="0">

  <a id="botao-sync" class="btn-floating btn-large waves-effect waves-light yellow">
      <i class="material-icons">swap_vert</i>
  </a>
      </div>

MEU CSS

.frase{
     font-size: 25px;
    font-weight: bold;
    text-align: left;
}

.campo{
  font-size: 20px;
  height:130px;
  border: 3px solid black;
}

.campo-desativado{
  background-color: lightgrey;
}
.icones{
  vertical-align: middle;
}
.botoes{
  display: flex;
}
.correto{
  border: 3px solid green;
}
.errado{
  border: 3px solid red;
}
.placar{
  display: none;
}

body{
  overflow: scroll;
}
#erro{
  color:red;
  display: none;
}
#spinner{
  display: none;
}
#number{
  width: 40px;
}
#botao-sync{
  float: right;

}

no #botao-sync, ele não esta flutuando o elemento, ele continua onde estava.