background image en positions

Hallo allen,

Op de website www.dubbel-e.nl/test/index.php/en/ staat bovenin het logo en een contactknop aangegeven. Door gebruik te maken van de template Protostar heb ik 2 position aan de bovenzijde genaamd: logo en position-0. Gewenst zijn 2 lijnen die doorgetrokken worden over de breedte lengte van de website, maar wanneer je de site verkleind naar bijv. een tablet formaat verplaatst de contact us knop naar links en worden de lijnen doorgezet rechts van de contact us knop. Dit is natuurlijk niet de bedoeling. Heeft er iemand een idee hoe ik dit kan oplossen? De 2 rode lijnen is een afbeelding die ik met repeat-x heb geplaatst.

alvast bedankt.

Contact us knop zal wel naar links moeten anders past het niet. Helemaal elegante oplossing heb ik niet, maar het is sowieso niet verstandig om met inline styles te werken en je definitie staat op de verkeerde plaats.
Dit werkt bijna:

.brand {
background: url("/test/images/test.png");
background-position: center center;
background-size: contain;
width: 100%;
background-repeat: repeat-x;
max-height: 60px;
}

.contact_us_button img {
vertical-align: top;
margin-top: -50px;
}

Enige is dat je dan toch nog een @media definitie toe moet voegen om die negatieve top marge weg te laten op kleine schermen.