Code shows briefly when page loads

Hi! When my website page loads, it briefly shows the Custom CSS code I have added to the header. How do I get rid of this? I tried to add <style> </style> but the Custom CSS does not let me add this to the code. Appreciate any advise! Thanks!

@tuanphan

Site is : www.homeofbabysleep.com

code added to header is :

//Header title//

.header-title-logo a:before {
    content: "HOME OF BABY SLEEP";
    display: block;
    font-size: 30px;
    font-family: minerva-modern;
      text-align: centre;
    padding-left: 0px;
      padding-top: 50px;
      vertical-align: centre;
    color: white;
     font-weight: 600;
  }
.header-title-logo a:after {
    content: "";
  }
.header-title-logo img {
  vertical-align: middle;
      horizontal-align: middle;
       padding-left: 0px;
}

.header-mobile-logo a:before {
    content: "HOME OF BABY SLEEP";
    font-size: 25px;
       font-weight: 600;
    color: white;
    display: block;
    width: 100%;
    font-family: minerva-modern;
      align-items: center;
    padding-right: 70px;
    padding-left: 0px;
      padding-top: 20px;
      vertical-align: centre;
    text-align: center;
} 

.header-mobile-logo img {
  vertical-align: centre;
    padding-left: 80px;
}

.header-title-logo img {
  vertical-align: top;
      horizontal-align: centre;
       padding-left: 0px;
}

Your code, you need to add to Custom CSS