HTML text bei mobiler-Ansicht sorgt für Design-Fehler, was tun?

[Sarius87]

hallo, ich habe eine Seite mit einer überschrift in Form eines inputs die unterschiedlich lang ist vom text, jetzt ist das problem dass bei der mobilen Ansicht die Überschrift über das design herausragt und das website-design somit kleiner wird und einfach schlecht aussieht, ich denke ihr wisst was ich meine ... wie kann ich da was gegen tun ? habe es mal mit

<div width="100%">

probiert aber das wurde ignoriert. hier die überschrift :

<p><font face="Roboto"><input type="text" style="text-align: center" disabled></font></p>

 

[kling1]

lern halt css.. den font tag gibt es nicht in html5 und statt width bei der div.. css nutzen

 

[Lawnmower]

Responsive Frameworks wie Foundation oder Bootstrap benutzen.
Und CSS Kenntnisse wären ziemlich nötig, die 2 Zeilen oben haben schon ziemlich viele Fehler.