bug in navigation Link, for my portfolio - html

Question

Trying to make my portfolio, and new to webdesign. I am trying to add navigation links but the last link goes to next line. Don't know why is it so?
I want in single line, and if even there is some different method to represent this pl. help me/guide me for that too.
Thank You!
My Demo
CSS & HTML
html,
body {
margin: 0%;
top: 0%;
}
body {
background: #2f233d;
overflow: hidden;
}
header {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 12%;
background: #333;
font-family: Agenda Medium, Sans-Serif, Arial;
font-size: 20px;
}
header img {
display: inline;
width: 227px;
height: 100px;
margin-left: 2%;
}
header .links {
display: inline-block;
position: absolute;
bottom: 10%;
}
header a {
border: 1px solid #ddd;
padding: 1%;
text-decoration: none;
color: #ccc;
}
footer {
position: fixed;
bottom: 0%;
left: 0%;
width: 100%;
height: 10%;
background: #ccc;
}
aside {
position: fixed;
top: 12%;
left: 0%;
width: 20%;
height: 78%;
background: #f2f1f1;
overflow-y: auto;
}
section {
position: fixed;
top: 12%;
left: 20%;
width: 82%;
height: 78%;
background: #fff;
overflow-y: scroll;
}
<header>
<img src="Logo.png" alt="logo" />
<span class="links">
Home
About
Gallery
Work
Contact
</span>
</header>
<footer></footer>
<aside></aside>
<section></section>

Answer 1

You need to define your widths. Currently width is dependent on the length of the word.
Here is one of many solutions, this one being very straightforward.
header img {
width: 15%;
}
.links {
width: 80%;
}
I shaved a bit off to account for margins and paddings. The important thing here is I'm defining the image's width in percent instead of pixels, and I'm defining the width of .links, and not just the children of it.
In honesty, your solution is going to need to be more complex. It needs to account for mobile devices, because a small screen will cause the words to overflow their border. This, however, should answer your immediate question.
fiddle

Answer 2

For header a and header .links to changes in CSS..
demo:
html,
body {
margin: 0%;
top: 0%;
}
body {
background: #2f233d;
overflow: hidden;
}
header {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 12%;
background: #333;
font-family: Agenda Medium, Sans-Serif, Arial;
font-size: 20px;
}
header img {
display: inline;
width: 227px;
height: 100px;
margin-left: 2%;
}
header .links {
display: inline-block;
position: absolute;
bottom: 10%;
width:100%
}
header a {
border: 1px solid #ddd;
padding: 1%;
text-decoration: none;
color: #ccc;
display:inline-block
}
footer {
position: fixed;
bottom: 0%;
left: 0%;
width: 100%;
height: 10%;
background: #ccc;
}
aside {
position: fixed;
top: 12%;
left: 0%;
width: 20%;
height: 78%;
background: #f2f1f1;
overflow-y: auto;
}
section {
position: fixed;
top: 12%;
left: 20%;
width: 82%;
height: 78%;
background: #fff;
overflow-y: scroll;
}
<header>
<img src="Logo.png" alt="logo" />
<span class="links">
Home
About
Gallery
Work
Contact
</span>
</header>
<footer></footer>
<aside></aside>
<section></section>

Answer 3

Just replace your header .links class
header .links
{
display:inline-block;
position:absolute;
bottom:10%;
width:100%
}
It will work for you.