Hiding the s4-titlerow Div will not have any effect on my team & community site

Question

I need to remove the unused white space from my team site and my community site, I added a custom CSS which have the following :-

div#s4-titlerow{ 
display: none;
}

But still the s4-titlerow is displayed as shown in the below picture:-

So is there a way to remove the un-used space and shift all the content to occupy it. Second point I still need the search box to be shown ?

Answer 1

Try using !important after your rule to override the inline style:

#s4-titlerow{ 
    display: none !important;
}

Answer 2

Do not use !important before you have too!

I would use this instead

#s4-bodyContainer > #s4-titlerow {
     display: none;
}