Can I make the logo go outside its designated area?

Yes of course. But first : what kind of header have you set up?
Logo left – menu right ? Shrink or not etc. pp. If Shrinking Header is set where do you start – where does it end ( standard 1/2) ?

f.e.: if you have a header starting height set to 100px and you like to have your logo at 150% of that
then set the logo height to 150% and the max-height to 150px
(if you got a svg as logo set .logo svg)

.logo,
.logo a {
  overflow:visible
}
.logo img,
.logo svg {
  height:150%;
  max-height:150px !important
}

to know the starting header height is important for the max-height setting this should be the factor of height x header first height
e.g: your header is set to 150px starting height. and you like to have a 1.6 times higher logo then it is for the logo:

.logo img,
.logo svg {
  height:160%;
  max-height:240px !important
}