WordPress align logo and site title (all medias)

wp-logo-title-aling.css

/* Title color */
.site-header .site-branding .site-title a {
  color: #7dae33ff;
}

/* Align logo and title for al devices */
@media (min-width:769px) {
  .site-branding {
    display: inline-block;
    /* Adjunst depending text lenght */
    max-width: 400px !important; 
  }
  
  .site-logo {
    float: left;
  }

  .site-title {
    float: left;
    margin-right: 20px;
    /* Adjunst depending text lenght */
    max-width: 300px;
  }
}

@media (max-width: 769px) and (min-width: 481px) {
  .site-branding {
    display: inline-block;
    /* Adjunst depending text lenght */
    max-width: 400px !important;
  }
  
  .site-logo {
    float: left;
  }
  
  .site-title {
    float: left;
    margin-right: 20px;
    /* Adjunst depending text lenght */
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .site-branding {
    display: inline-block;
    /* Adjunst depending text lenght */
    max-width: 300px !important;
  }

  .site-logo {
    float: left;
    margin-top: 10px;
  }

  .site-title {
    float: left;
    margin-right: 20px;
    /* Adjunst depending text lenght */
    max-width: 150px;
    /* Adjunst depending text lenght */
    font-size: 1.5em !important;
  }
}