odd-shaped highlight when main menu is clicked on Chrome

The outline is displayed since #1532742: Fix skiplink behavior for Opera and Webkit browsers was committed. The outline can be hidden with outline: 0; on the :focus pseudo class of the element that has the tabindex, which by default is nav id="main-menu" role="navigation", for example, nav[role=navigation]:focus {outline: 0;} the tabindex attribute:

[tabindex="-1"] {
  outline: 0;
}

Reference: https://github.com/suitcss/base/blob/gh-pages/base.css

This fix seems fine concerning accessibility, in that the focus still shows the dotted outline tabbing to the individual menu items, and we don't use it visually for the whole nav container.

---
The odd shape outline is an artifact from earlier code of the element-invisible method used. While I'd like to make that go away for you too, I believe getting rid of the outline will make that a non issue. Zen still uses code for theme links for main and secondary menus, with a comment recommending to build your own menu. The inline .clearfix class here uses D7 clearfix (where Zen's sass uses compass clearfix) and the D7 clearfix's content: "."; causes the space after the element.

Thanks!
I ran into this as well and this post fixes it…

Thanks @echoz. Can confirm that adding the fix in #1 to my _misc.scss file solved it.

Thanks, adding this line solves the problem for me.