Flexible margins/padding with undefined context widths?

Well the first thing to remember about ul is that as a block level element without a user-set width fits to its parent. The margin of a li should be in relationship to yes it parent, but because it's parents default width is 100% it should really be in relationship to its grandparent's width. About your padding question. I'll start short: the project doesn't require you to change the padding of .btn. Because(longer explanation): your right, setting the padding in percentage on an element with a variable width is tricky. This problem is usually avoided by not setting the padding in % for these elements at all. Elements that fit to content(in the traditional sense) are inline-elements like the <a class="btn"> in your code. Padding is not commonly set on inline elements because inline elements only respect the horizontal padding(inline elements do not follow any horizontal related properties like height, padding-top, top, bottom, etc), thus it looks strange to set it. It's important to remember that inline elements are supposed to flow with what is next to it. Like an <a> in the middle of a paragraph it's a different element yes, but to the reader it's a word in a sentence. And separating it with padding and margin defeats the purpose of that. If you want a group of items to be adjacent to each other, but be there own thing(like tabs in a horizontal nav bar) then you can use alternatives like an inline-block element which is like a block but without the line breaks(put simply). The CSS working group is discussing a draft that would allow units based on content (http://caniuse.com/#feat=intrinsic-width). I know this is a bit long but I really hope it helps.