ciao, al momento non ho la possibilità di provare ciò che sto per dirti, cerco di non dire cavolate (casomai stasera la provo e ti mando il codice per bene)

realizza un terzo div subito sotto quello "colorato" (praticamente il div grigio ne contiene due)
codice:
<div>
  <div></div>
  <div></div>
</div>

ora, questo div deve avere impostata la proprietà "float: left;", "margin:auto" e imposta la sua width, per esempio, al 70%.

ora inserendo il testo dentro questo div dovresti averlo centrato senza dover allargare per forza la barra colorata

se non dovesse funzionare a primo colpo prova a fare qualche modifica, come ti ho già detto adesso non posso provare quindi potrei aver sbagliato qualcosa

EDIT: ah comunque il "width" mettilo come proprietà del css e non direttamente sul div, segnalando anche i "px" (width:300px