html - 响应式设计与 Wordpress : Setting up main navigation

Question

You can view my site live here.

我在设计响应式网站方面相当陌生，我正在努力提高我的编码技能。我试图确保我的主导航和网站标题在所有屏幕尺寸上看起来一致。但是我在正确设置 CSS 方面遇到了问题。我通常很快就能找到解决方案，但由于某种原因，我无法获得想要的结果。

计划是将网站的标题和导航相互对齐，虽然有很多方法可以做到这一点，但我似乎无法找出最佳做法。

它目前看起来很乱，导航在某些边缘被切断。我已经尝试在响应式样式表规则中添加更多内容和从中删除填充内容。

当前截图

我当前的导航是这样的:

当前标记

/*** CURRENT CSS ***/
.title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 13px;
    padding:10px;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#00e9d9;
    margin-right:232px;
}
#navigation {
    background-color:#18161d;
    padding-top:4px;
    padding-bottom:4px;
    font-size: 13px;
    letter-spacing:2px;
    text-align:center;
    font-family: 'Open Sans', sans-serif;
    font-weight:700;
    font-size:13px;
    z-index:1;
    overflow:hidden; 
    color:#00e9d9;
    margin-bottom:25px;
}

<!-- CURRENT HTML -->

<div id="navigation">
    <span class="title">KATERINA GRAHAM WORLD</span>
    <a href="#"><i class="fa fa-home"></i> Homepage</a> 
    <a href="#"><i class="fa fa-info-circle"></i> Information</a> 
    <a href="#"><i class="fa fa-camera"></i> Photo Archive</a> 
    <a href="#"><i class="fa fa-desktop"></i> Website</a> 
    <a href="#"><i class="fa fa-align-left"></i> Online</a> 
</div>

Answer 1

解决了这个问题。我认为没有必要为移动屏幕尺寸创建样式，因为我认为添加 max-device-width 会告诉浏览器我想要什么 '因为我给了它一个最大值。我应该更具体地说明它，并确保代码确实具有适用于较小屏幕尺寸的样式，所以我添加了以下内容:

/*------------------------------------------
     450px Media
------------------------------------------*/
@media only screen and (max-width: 450px), only screen and (max-device-width: 450px) {

_#header {
background-color:#fff!important;
height:248px!important;
width:auto!important;
overflow:hidden!important;
}

.title {
padding:10px !important;
width:100% !important;
display:block;
}

#navigation a:link {
display: block;
margin: 3px;
padding: 10px !important;
}

#navigation a:active {
display: block;
margin: 3px;
padding: 10px !important;
}

#navigation a:visited {
display: block;
margin: 3px;
padding: 10px !important;
}

#navigation a:hover {
display: block;
margin: 3px;
padding: 10px !important;
}
}