Поместите элемент, который выходит сбоку?

Question

Я пытаюсь сделать текст «FlowerPot» выравниванием по центру, но это не сработает. Я не знаю почему. Может быть, это элемент <code>, который делает все безумным, но я не думаю, что это изменило бы ситуацию. Это мой код:

@import url(http://fonts.googleapis.com/css?family=Lobster+Two:400,400italic); 
 
body { 
 
    width: 100%; 
 
    background-color: #B10DC9; 
 
    overflow-x: scroll; 
 
    right: 0; 
 
} 
 
img { 
 
    padding-left: 10px; 
 
    width: 50px; 
 
    z-index: 0; 
 
    float: left; 
 
} 
 
code { 
 
    position: absolute; 
 
    top: 0; 
 
    color: white; 
 
    z-index: 0; 
 
    float: left; 
 
    width: 100%; 
 
} 
 
#introdiv { 
 
    background-color: blue; 
 
    text-align: center; 
 
    width: 100%; 
 
    padding: 0px; 
 
    position: fixed; 
 
    z-index: 0; 
 
}

<div id="introdiv"> 
 
    <img src="http://cakestyle.tv/wp-content/uploads/2013/03/Flower-Pot-no-background-smaller.png"></img> 
 
    <code style="font-family:Lobster Two; font-size:60px;">FlowerPot</code> 
 
</div>

Пожалуйста, помогите. Я не знаю, что я делаю неправильно. Мне нужно что-то добавить или удалить? Мне нужно что-то изменить?

Любая помощь будет оценена по достоинству. Благодаря!

Answer 1

left:0 Добавить в code

code { 
    position: absolute; 
    top: 0; 
    color: white; 
    z-index: 0; 
    float: left; 
    width: 100%; 
    left: 0; 
} 

Answer 2

изменить селектор code стиль и добавить left: 0; стиль. вы можете получить свой результат.