How to narrow the header?

What do you mean by ‘depth’? Can you tell with the help of a screenshot?

I mean I want the grey area at the top thinner..

Here is the screenshot:

See the screenshot at the bottom of this page

Okay. Do you want to reduce its height? Or it’s width?

I would like to reduce the height

Use this custom CSS:

#header-text-nav-wrap {
    padding: 10px 0 10px;
}

This will reduce the vertical padding from around the header.
Although this should suffice, however, if you want to further reduce the height, then you will have to decrease the height of the logo.
For that you will need to add:

#header-logo-image img {
    width: 85px;
}

#header-text {
    float: left;
    padding-top: 0px; /* Change according to your requirements */
}
h1#site-title, h3#site-title {
    line-height: 25px; /* Change according to your requirements */
}
#site-title a {
    font-size: 25px; /* This should be equal to the line-height in the previous rule */
}
#site-description {
    font-size: 14px; /* Change according to your requirements */
}
.sfsi_wicons {
    width: 30px !important;
    height: 30px !important;
}