ul li style and keeping it inside one line

Question

I'm trying to create a menu list item which has 4 items but it doesn't feed inside one line for some reason. I tried nested it with nested divs but had no luck. The problem starts to happen when I added the `padding: 10px;`. Here is the latest HTML and CSS I have: HTML: ``` ``` CSS: ``` #menu { margin: 0; padding: 0; } #menu li { display: block; float: left; margin: 0; width: 25%; background-color: gray; padding: 10px; } ``` I also have a jsfiddle for that: http://jsfiddle.net/GLh92/1/ As you can see, it doesn't fit inside the one line. I also have a responsiveness concern here. So, it needs to fit inside one line for different screen resolutions. Any idea how this can be done in a clean way?

Accepted Answer

Use `box-sizing: border-box` on the `li` elements. This will make the padding part of the width calculation.

http://jsfiddle.net/ExplosionPIlls/GLh92/5/

ul >li style and keeping it inside one line

Solution

Problem