CSS Padding not Working?

Question

Why does the search box here not have 15px padding to the right? This is the CSS:

#element_right {
padding: 120px 15px 0px 0px;
color:#161514;
font-family:helvetica, sans-serif, Arial;
font-size: 13px;
background: #f4f4f4;
width: 270px;
height: 100%;
float: right;
}

I'm using Chrome

Answer 1

This should work (if that's what you're really trying to achieve):

#element_right {
padding: 120px 35px 0px 0px;
color: #161514;
font-family: helvetica, sans-serif, Arial;
font-size: 13px;
background: #F4F4F4;
width: 270px;
height: 100%;
float: right;
}

Answer 2

To reach your effect, setting margin is a more suitable way.

Of course, it would be in conflict with the width as your child element with 280px of width break the entire structure.

I suggest you to remove the width in child element and make width effect at #element_right with a 295px of width the same with boxes below.

So the search box's width and horizontal position would exactly be identical to the boxes below besides the border and box shadow.

EDIT: Delete misleading answer.