Why is there white gap between header and box it is in?

Question

Why is my Frola box and toolbar not working properly? There is a white gap as shown:

This is what my box looks like

This is what I have written and it still does not work

.fr-box {
  border-radius: $border-radius !important;
  border: thin solid $dark !important;
margin:0px !important;
padding:0 !important;

  .fr-counter {
    border-bottom-right-radius: $border-radius !important;
  }
}

.fr-toolbar {
  border-top: 0 !important;
  border-top-left-radius: $border-radius !important;
  border-top-right-radius: $border-radius !important;
  box-shadow: none !important;
  background: $dark !important;
  margin:0 !important;
padding:0 !important;