__HTML:__ - Since the the navigation is the only thing inside your `<div class="footer">`, how about moving the class to the `ul`? - Instead of using `span`'s there, you can add the `»` to a pseudo-element (see the CSS part) __CSS:__ - For your arrows, use pseudo-elements: .footer a:after { content: "\00BB"; float: right; padding: 9px; border-radius: 2px; background-color: #ca0000; /* hex-based values are shorter */ } You won't need to hide them on bigger screens either, if you define them inside a media .query - Instead of actually writing the links in capital letters, write them like you would in normal language and make them appear uppercase with `text-transform: uppercase;` - I don't see a purpose for the `min-width: 1px` part in your media query. Just unnecessary. - Defining `display: block;` on list-items is not necessary, because they behave like block-level elements already - Select `.footer li` instead of `.footer ul li` and `.footer a` instead of `.footer ul li a`. No need for this extra layer of specificity and dependency. There will probably no other links and list-items in this ul other than these you already have