Responsive design with Wordpress: Setting up main navigation - html

Question

You can view my site live here.
I'm fairly new at designing responsive websites and I'm trying to develop my coding skills. I am trying to make sure that my main navigation and site title look consistent across all screen sizes. However I'm having issues with setting up the CSS properly. I'm usually quick with finding a solution, but for some reason I can't get the result I want to achieve.
The plan is to align the site's title and the navigation below each other and although there numerous ways of doing that, I can't seem to figure out the best practice.
It currently looks messed up and the navigation is being cut off at certain edges. I've tried adding more and removing padding to/from the responsive stylesheet rules.
Current Screenshot
My current navigation looks like this:
CURRENT MARKUP
/*** 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>
<i class="fa fa-home"></i> Homepage
<i class="fa fa-info-circle"></i> Information
<i class="fa fa-camera"></i> Photo Archive
<i class="fa fa-desktop"></i> Website
<i class="fa fa-align-left"></i> Online
</div>

Answer 1

Solved the issue. I didn't think it'd be necessary to create a styling for mobile screen sizes because I thought adding a max-device-width would tell the browser what I wanted 'cause I gave it a max. I should've been way more specific about it and making sure the code DOES have styling for smaller screen sizes zo I added this:
/*------------------------------------------
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;
}
}

Answer 2

Instead of entirely customising your container, customise the links as well.
E.g.
a {
padding:7px;
margin:0 8px;
color:#00e9d9;
background:#00e9d9
}

Answer 3

I think that you should refer to this answer on this previous question Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques
I really do recommend that you read a little about Design Fundamentals and also read about responsive web design. Here is a few articles to get you started: HTML Responsive Web (W3) and Responsive Web Design: What Is It and How To Use it (Smashing Magazine)
Designing a good, user-friendly responsive website takes time and planning. Personally I like to design each element at a time (e.g I'll design the generic desktop header element then redesign or tweak it for tablet and mobile. Then I'd do the same for the footer and site content.)