html - ページデザインを破壊するリンクタグ

Question

ポートフォリオをデザインしていて、この問題に遭遇しました:
リンクタグ ( <a> ) を適用すると、作成したデザインが破壊されます。
フォント サイズがはるかに小さく、フォントが滑らかではありません。例を次に示します 。これを防ぐにはどうすればよいですか?
リンク全体を処理するために js を使用することを検討しました (何らかの方法でこれらに js を使用するつもりです)。

編集:
申し訳ありませんが、ソースを含める必要がありました:
HTML:

<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'>
<nav>
    <div class="navwrap">
        <div class="logo inline"></div>
        <a href="#a"><div class="inline">About</div></a>
        <a href="#p"><div class="inline">Projects</div></a>
        <a href="#c"><div class="inline">Code</div></a>
        <a href="#l"><div class="inline">Learn</div></a>
    </div>
</nav>

CSS:

body {
    background: #e3e3e3;
}

a, a:link, a:visited, a:hover, a:active{
    text-decoration:none;
    color:inherit;
}



/* NAVIGATION */
.logo {
    width: 128px;
    height: 128px;
    background-size: 100%;
    background-image: url(http://djonn.dk/logo.svg);
}

.inline {
    float: left;
}

.navwrap {
    margin: 0 auto;
    height: 128px;
    width: auto;
    margin: 0 auto;
    width: 995px;
    margin-bottom: 35px;
}

nav a  {
    position: relative;
    top: 48px;
    display:block;
}
nav a div{
    font-family: 'Ubuntu Condensed', sans-serif;
    font-size: 2.25em;
    padding: 0 15px 0 15px;
    border-left: 1px solid black;
}

nav a:nth-of-type(1) div{
    border: none;
}

@media only screen and (min-width: 0px) and (max-width: 760px) {
    .navwrap {
        width: 585px;
    }

    nav a div {
        font-size: 1.5em;
    }
}

@media only screen and (min-width: 761px) and (max-width: 995px) {
    .navwrap {
        width: 761px;
    }

    nav a div {
        font-size: 1.85em;
    }
}

ビジュアルについては、http: //jsfiddle.net/djonn/DJG4L/を参照してください。

あなたのコメントのいくつかを明確にするために:
- これは完全にカスタム css です。私は css リセット シートを使用しています。
- CSS の代わりに js を使用しません。<a> タグの代わりに使用します。