Style 2 and 3 logo does not align on small screen

demo.hotjoomlatemplates.com/index.php?template=politics#

This happens on my website and your demo, the style 1 shows "politics" title without the background logo. But style selections 2 and 3 show the name below the logo it looks goofy. How can I fix it? see link above.

It look ok to me?

This is image shown as background image if you need to change it for

style 1:
templates/hot_politics/images/custom/logo_bg.png
style2:
templates/hot_politics/images/custom/logo_bg2.png
style3:
templates/hot_politics/images/custom/logo_bg3.png

Notice how the style 1 blue screen logo disappears when it is compact for a mobile device.

Notice how the maroon and green screen letters and logo does not match up with the logo bar on a mobile device screen. see screenshot 1 and 4, they look crappy.

What is the difference on style 2 and 3? Why isn't the logo disappearing on a small mobile device screen like style 1?

I will need site link to check this.

www.nodownusda.com

Add this to bottom of template_css.css:

.mp_logo .cell_pad{
margin:0;
}

@media only screen and ( min-width : 984px ){

.sparky_logo a{
font-size:24px;
}

.sparky_slogan{
margin:0;
padding:0;
}

}