Making a fixed div have freely moving text when re-sizing browser - html

Question

I have a header set up as fixed, so that it will always be at the top of the page when scrolling, however when the browser window is re-sized, the full header doesn't show. It is fixed, but I want the horizontal scroll to show the full header. I just need help in doing that. I tried the alternative position attributes but it failed to accomplish what I wanted, alongside my attempt with float.
Here's the html `
<div id="container">
<header>
<h1>Home</h1>
</header>
<div id="content">
<nav>
<div id="logo">
<img src="Images/Logo.png" >
</div>
<ul>
<li>
<a href="Index.HTML">
<i class="fa fa-HOME fa-2x" id="on"></i> <!--this is using the font awesome icons, reffered to in the head. Multiple divs are used as the websote declared it should be done. Purely used for the icons -->
<span class="nav-text" id="on">
HOME
</span>
</a>
</li>
<li>
<a href="standards&info.HTML">
<i class="fa fa-info fa-2x"></i>
<span class="nav-text">
STANDARDS & INFORMATION
</span>
</a>
</li>
<li>
<a href="interesting_info.HTML">
<i class="fa fa-magic fa-2x"></i>
<span class="nav-text">
INTERESTING INFORMATION
</span>
</a>
</li>
<li>
<a href="JOBS.HTML">
<i class="fa fa-briefcase fa-2x"></i>
<span class="nav-text">
JOBS
</span>
</a>
</li>
<li>
<a href="photo&video.HTML">
<i class="fa fa-picture-o fa-2x"></i>
<span class="nav-text">
PHOTOS & <BR> VIDEOS
</span>
</a>
</li>
</ul>
</nav>
</div>
<footer>
<h4>© 2015</h4>
</footer>
</div>`
And heres the CSS
#import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
html, body{
height:100%;
width:100%;
background: rgb(110, 110, 110);
padding:0;
margin:0;
min-width:1280px;
}
#container{
width: 100%;
height: 100%;
}
.fa-2x{
font-size:2em;
}
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size:20px;
margin-right:10px;
margin-left:10px;
}
nav {
background:rgb(255, 90, 9);
position:fixed;
top:0;
height:calc(100% - 40px);
min-height:600px;
left:0;
width:80px;
overflow:hidden;
transform:translateZ(0) scale(1,1);
transition:all .1s linear;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
-moz-transform:translateZ(0) scale(1,1);
-moz-transition:all .1s linear;
-ms-transform:translateZ(0) scale(1,1);
float:left;
z-index:100;
}
nav:hover{
width:200px;
transform:translateZ(0) scale(1,1);
transition:all .1s linear;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
-moz-transform:translateZ(0) scale(1,1);
-moz-transition:all .1s linear;
-ms-transform:translateZ(0) scale(1,1);;
}
nav li {
position:relative;
display:block;
width:250px;
}
#on{
color:#41A3A3;
}
nav li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
font-size: 14px;
text-decoration:none;
transform:translateZ(0) scale(1,1);
transition:all .1s linear;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
-moz-transform:translateZ(0) scale(1,1);
-moz-transition:all .1s linear;
-ms-transform:translateZ(0) scale(1,1);
transition:all .1s linear;
margin-top: calc(100% / 8);
}
nav .nav-icon {
position:relative;
display: table-cell;
width:60px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;
}
.nav-text {
position:relative;
display: table-cell;
vertical-align:middle;
width:180px;
font-family: 'Droid Serif', serif;
font-size:14px;
}
nav ul,nav li {
outline:0;
margin:0;
padding:0;
}
header{
position:fixed;
top:0px;
margin-left:80px;
width:100%;
height:113px;
background:rgb(57, 57, 57);
z-index:90;
white-space: nowrap;
}
h1{
font-family: 'Impact', sans-serif;
text-align:center;
font-size:40px;
color:white;
line-height:50px;
padding-left:129px;
}
footer{
position:fixed;
bottom:0px;
right:0px;
width:100%;
height:40px;
background:rgb(57, 57, 57);
line-height:0px;
}
h4{
font-family: 'Impact', sans-serif;
font-size:22px;
color:white;
text-align:center;
padding-right:20px;
}
h2{
text-align:center;
font-family: 'Cuprum', sans-serif;
font-size:50px;
color:#BFBFBF;
}
#content{
height:calc(100% - 160px);
width:100%;
min-width:100%;
top:114px;
}
.twobox{
width:35%;
height:96%;
top:0;
margin-right:4%;
margin-left:6%;
float:left;
}
.title{
background-color:#7E4A00;
height:70px;
margin-bottom:8%;
margin-top:6%;
width:100%:
}
.info{
background-color:#7E4A00;
height:auto;
padding-top:10px;
width:auto%;
padding-left:4%;
padding-right:4%;
overflow:hidden;
text-overflow:ellipsis;
height:500px;
overflow-y:auto;
}
.infojob{
background-color:#7E4A00;
height:auto;
padding-top:10px;
width:auto%;
padding-left:4%;
padding-right:4%;
overflow:hidden;
text-overflow:ellipsis;
height:600px;
overflow-y:auto;
}
hr{
margin-top:40px;
margin-bottom:40px;
opacity: 0.0001;
}
p{
text-align:center;
font-family: 'Times New Roman', serif;
color:#BFBFBF;
font-size:18px;
}
#onebox{
width:40%;
height:96%;
top:0;
float:left;
margin-left:26%;
background-color:#7E4A00;
overflow-y:auto;
}
.threebox{
width:20%;
height:94%;
top:0;
margin-right:4%;
margin-left:6%;
float:left;
}
.row{
display: inline-block;
height:170px;
width:80%;
margin-left:10%;
margin-top:60px;
min-width:1120px;
}
#rows{
display: inline-block;
height:390px;
width:80%;
margin-left:10%;
margin-top:60px;
min-width:1120px;
}
.read_more{
text-align:center;
font-family: 'Times New Roman', serif;
color:#E50000;
font-size:18px;
opacity:0.8;
}
h3{
text-align:center;
font-family: 'Times New Roman', serif;
color:#BFBFBF;
font-size:30px;
}
h5{
font-family: 'Impact', sans-serif;
text-align:center;
font-size:25px;
color:#BFBFBF;
text-align:center;
}
a:link {
color:#efefef;
}
a:visited {
color:#efefef;
}
a:hover {
color:#52CCCC;
}
.boxmore{
width:18%;
height:170px;
background-color:#7E4A00;
float:left;
margin-left:4%;
margin-left:4%;
border-radius:0px 0px 30px 30px;
}
.box{
width:18%;
height:170px;
background-color:#7E4A00;
float:left;
margin-left:4%;
margin-left:4%;
}
.center{
margin-left:42%;
width:260px;
height:50px;
background-color:#7E4A00;
margin-bottom:15px;
}
.wraps{
width:220px;
height:350px;
float:left;
margin-right: calc((100% - 910px ) / 4);
}
.discriptions{
width:220px;
height:60px;
margin-top:310px;
margin-left:43px;
background-color:#7E4A00;
padding-bottom:1px;
}
.discriptionvid{
width:240px;
height:60px;
background-color:#7E4A00;
padding-bottom:1px;
}
.rowvid{
display: inline-block;
white-space:nowrap;
padding-left:3%;
margin-left:6%;
height:280px;
width:calc( (560px * 2) + (20px * 2));
}
.media{
width:240px;
height:280px;
margin-left:38px;
float:left;
}
.standard{
width:30%;
min-width:20%;
margin-left:10%;
margin-bottom:100px;
border-spacing:0px;
padding:10px;
}
.centered{
margin-left:40%;
width:260px;
height:70px;
background-color:#7E4A00;
}
.standard th {
width:200px;
border-bottom:solid #000000;
padding:20px;
background:#7E4A00;
height:50px;
}
.standard td {
border-bottom:dashed #000000;
padding: 0px 10px;
height:170px;
min-height:170px;
min-width:365px;
}
.left{
width:40%;
}
.mid {
border:1px;
border-right:solid #000000;
border-left:solid #000000;
}
.involves{
height:144px;
background-color:#7E4A00;
width:60%;
margin-top:0%;
margin-left:19%;
padding:1px;
}
.small{
height:30px;
background-color:#7E4A00;
width:60%;
margin-top:0%;
margin-left:4%;
margin-bottom:14.5px;
}
.small_ind{
margin-top:0%;
height:30px;
margin-bottom:105px ;
background-color:#7E4A00;
width:60%;
margin-left:18%;
}
And here's the JSFiddle
It isn't displaying properly as font awesome isn't working, so the nav seems a bit out of sorts. You can still see the issue with the header though, if you minimise the screen size.
Any help will be appreciated, thank you!!

Answer 1

Remove this CSS:
html, body{min-width:1280px;}
header{margin-left:80px;
h1{padding-left:129px;}
See JSFiddle