html stránka který element dělá šírku

Na html stránce jeden element roztahoval šířku tak, že nebyla vhodná pro chytré telefony.
Zjistit, který element to dělá, je detektivka.
V Google Chrome prohlížeči je možnost otevřít si vývojářskou konzoli pomocí klávesy F12.
Kliknout na šipku a pak na patřičný element, kde jsem čekal chybu, v záložce Elements.
Zjistil jsem, že html kontejner je užší, než ostatní elementy, i když měl šířku 100% a
to dole v konzoli, kde se vypsaly všechny nadřazené elementy elementu, na který jsem klikl.

Postupně jsem myší přejížděl nad nadřazenými elementy a viděl, že všechny mají užší šířku,
dle namodralé ploše pohybující vyznačující element na stránce.
Pak jsem přejel nad tabulku nadřazenou přímo elementu a tam již vykazovala šířku větší než HTML tag element.
Zkusil jsem tabulku zúžit na width:50%
Styl lze snadno upravit v pravém poli vývojářské konzole pod hlavičkou STYLES - element.style.
Tabulka již vykazovala zúžení, ale stále tam byl nějaký element, který byl širší.
Najel jsem na tlačítko, označil jej, viz na obrázek tmavě šedý proužek a zkusil jsem mu mu zmenšit šířku natvrdo,
tedy na 200px. Stránka okamžitě splaskla - byl nalezen problém.

Tedy po delším zkoušení nakonec problém dělalo tlačítko input type button, které mělo delší text,
jenž se na malých obrazovkách ještě zvětšil, měl jsem to ve style.css tak nadefinováno.

Tlačítko INPUT jsem změnil na DIV, text zkrátil a vše bylo již v pořádku.
Místo INPUT, pokud je to možné, raději používat elementy SPAN, DIV, A s událostí onclick.

Obrázek ukazuje vývojářskou konzoli prohlížeče Google Chrome a šířku elementů, když se přejíždí nad jejich seznamem myší.

Najel jsem kurzorem nad tag HTML a hned viděl, že ten stránku nerozšiřuje a není příčinou problému, pak jsem přejel nad další tag a postupoval až k tagu, který již byl širší než HTML a v něm byl problémový element.