Выравнивание текста в теге абзаца зависит от браузера

Question

Я работаю над редизайном своего сайта, и у меня возникла странная проблема. У меня есть простой абзац, который равен align: center. Он отлично отображается в Chrome, но текст смещается вправо в Firefox и IE.

У меня есть все теги абзацев, установленные в margin: 0px в качестве базовой линии. Я заметил, что когда я удаляю это, Firefox добавляет свой стандартный край 1em к верхнему и нижнему , и текст становится центрированным. Однако для моего макета мне нужны поля в ноль.

Вот мой HTML:

<div id="headline"> 
<p>It’s <span>easy</span> to get a great website, when you know how.</p> 
<div> 

Вот соответствующий CSS:

p { 
    margin: 0px; 
    padding: 0px; 
} 

#stage #headline p { 
    font: bold 3em/1.2em Montserrat,Helvetica,Arial,sans-serif; 
    padding: .2em 6%; 
} 

#stage #headline p { 
    text-align: center; 
} 

Answer 1

Существует элемент в содержании заголовка, который толкает вниз в область слева от вашего пункта ,

Добавить clear:both; в инструкцию #stage #headline p (любой), чтобы устранить проблему визуально.

Answer 2

Внутри #smallMenu > .small-inner есть неочищенные плавающие элементы. Они подталкивают текст в параграфе справа.

Вы можете использовать

#smallMenu > .small-inner { 
    overflow: hidden; 
}