× No styling on anchor

• Item One
• Item One
• Item One

Anchor tags have no display declaration here.

Height of the list items is dictated by the line-height of the anchors throughout.

√ a { display: block; width: 100%; }

• Item One
• Item One
• Item One

Anchor tags are declared as display: block; width: 100%; here.

The user can now click anywhere within the list item and it will register a click on the anchor as well because each anchor sits on top of/above its parent list item.

× li { padding: 0 15px; } a { display: block; width: auto; }

• Item One
• Item One
• Item One

List items have padding: 15px; here. Because the anchors are childen of the list items, they can only expand as big as the width constraints of the parent list items—170px.

√ a { padding: 0 15px; display: block; width: auto; }

• Item One
• Item One
• Item One

Anchor tags are declared as display: block; & width: auto; and padding: 0 15px; here.

Clicking anywhere within the list item works here as well, as long as things like padding or border are set on the anchor, not the parent list item.