Why am I missing a section? - html

Question

So here's what I should be getting
But this is what I'm getting
As you can see the yellow section is missing. Here's my working example http://jsfiddle.net/Qk543/ but for some weird reason I cannot replicate it. Here's my code for the defective page.
<div class="wrap">
<div class="foot">
<ul class="styl">
<a id="html" href="#">
<li style="background: #F16529">
WORD
</li>
</a>
<a id="css" href="#">
<li style="background: #2AA9E0">
WORD
</li>
</a>
<a id="php" href="#">
<li style="background: #8892BF">
WORD
</li>
</a>
<a id="js" href="#">
<li style="background: #F0DB4F">
WORD
</li>
</a>
</ul>
</div>
</div>
And the CSS to it...
h1 {
padding: 80px 0 40px;
font-size: 40px;
line-height: 48px;
color: #505762;
}
.search h1 {
padding: 60px 0;
}
.slidey {
overflow: hidden;
padding: 30px 0;
background: #f3f5f8;
border-bottom: 1px solid #e5e8ed;
}
.js-enabled .slidey {
-webkit-transition: margin-top .2s;
-moz-transition: margin-top .2s;
transition: margin-top .2s;
}
.slidey b, .slidey label {
display: block;
font-weight: 500;
padding-bottom: 15px;
font-size: 15px;
font-weight: 500;
}
.slidey form, .slidey aside {
float: left;
width: 50%;
}
.slidey form input {
padding: 20px;
width: 75%;
}
.slidey li {
list-style: none;
}
.slidey a {
display: block;
text-decoration: none;
color: #717985;
}
.slidey a:hover {
color: #414b59;
}
.slidey li span {
float: right;
opacity: .6;
}
#top {
overflow: hidden;
padding: 20px 35px;
background: #fff;
border-bottom: 1px solid rgba(22,36,54,.1);
}
#top a {
float: left;
font-size: 13px;
font-weight: 500;
text-decoration: none;
color: #8895a7;
}
#top #logo:hover, #top ul a:hover, #top ul .active a, .posts .items li:first-child h2 a:hover, p a:hover {
color: #4171b1;
}
#top ul {
list-style: none;
float: right;
}
#top ul li {
float: left;
padding-left: 40px;
}
#top ul a {
display: inline-block;
color: #555f6d;
}
#top ul img {
display: inline-block;
vertical-align: middle;
position: relative;
top: -2px;
width: 16px;
height: 16px;
opacity: .4;
}
#top ul a:hover img {
opacity: .7;
}
#top ul a.active img {
opacity: 1;
}
/**
* Index page listing, category listing, search page results
*/
.items {
list-style: none;
}
.items > li {
padding: 70px 0 60px;
color: #97aec9;
background: #3c4552;
}
.posts .items > li:first-child {
background: #fff !important;
padding: 110px 0;
}
.items li h1 a, .posts .items > li:first-child h2 a {
color: #3d4551;
}
.items h1 {
padding: 0 0 8px;
}
.items h1 a {
text-decoration: none;
}
.items h2 {
font-size: 32px;
line-height: 41px;
}
.items h2 a {
display: block;
padding-bottom: 12px;
color: #fff;
color: rgba(176,200,236,.8);
text-decoration: none;
}
.items h2 a:hover {
color: #fff;
}
.items .content {
padding: 10px 0 0;
}
.items .content p {
padding-bottom: 15px;
}
/**
* Pagination
*/
.pagination {
overflow: hidden;
padding: 30px 0;
margin-bottom: 50px;
border-top: 1px solid rgba(22,36,54,.1);
border-bottom: 1px solid rgba(22,36,54,.1);
}
.pagination:empty {
display: none;
}
.pagination a {
float: left;
text-decoration: none;
font-size: 13px;
font-weight: 500;
color: #6f7b8b;
}
.pagination a:hover {
color: #3c4857;
}
.pagination a.next {
float: right;
}
/**
* Give some extra space to single-page wrappers
*/
.content.wrap {
padding-bottom: 50px;
}
.content.wrap ul, .content.wrap ol, .items li ul {
padding: 20px 30px;
}
.content.wrap ul ul, .content.wrap ol ol, .items li ul ul {
padding: 0 20px;
}
/**
* Footnotes and straplines
*/
.footnote, .commentlist time, .items footer {
display: block;
padding: 5px 0 15px;
color: #98a2b1;
font-size: 14px;
font-style: italic;
white-space: nowrap;
}
.footnote {
padding: 20px 0 40px;
}
/**
* Comment form
*/
ul.commentlist {
margin-bottom: 40px;
list-style: none;
border-top: 1px solid rgba(22,36,54,.1);
}
ul.commentlist .wrap {
position: relative;
}
ul.commentlist li {
padding: 40px 0;
border-bottom: 1px solid rgba(22,36,54,.1);
}
ul.commentlist time {
font-size: 13px;
}
ul.commentlist h2 {
font-size: 25px;
line-height: 33px;
}
ul.commentlist .counter {
position: absolute;
right: 0;
top: 0;
font-size: 25px;
font-weight: 300;
color: #cdd2da;
}
#comment {
overflow: hidden;
}
#comment label[for] {
display: none;
}
#comment p {
float: left;
width: 48%;
margin-right: 4%;
margin-bottom: 10px;
text-indent: 0;
}
#comment p + p {
margin-right: 0;
}
#comment p.textarea {
float: none;
width: 100%;
}
#comment input, #comment textarea {
width: 100%;
padding: 10px 15px;
font-size: 15px;
font-weight: normal;
border: 1px solid rgba(22,36,54,.2);
border-radius: 4px;
}
#comment input:focus, #comment textarea:focus {
outline: none;
background: #f7f9fc;
}
#comment textarea {
min-height: 150px;
max-height: 800px;
resize: vertical;
}
#comment button {
display: inline-block;
padding: 9px 18px;
background: #4e82ce;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
}
#comment button:hover {
background: #3c6eb7;
}
*{padding:0;margin:0;}
body {
text-align: center;
padding-top: 50px;
font-family: "Helvetica Neue", sans-serif;
}
.foot{
bottom: 0px;
position: fixed;
width:100%;
margin: 0px;
font-weight: 400;
}
.foot li{
opacity: 0.95;
position: relative;
float: left;
list-style: none;
width: 25%;
height: 60px;
text-align: center;
}
.foot a{
font-size: 1.5em;
color: #fff;
height: 75px;
position: relative;
text-indent: 0;
text-decoration: none;
line-height: 60px;
}
.foot li:nth-child(1){
background: #B36C4E;
}
.foot li:nth-child(2){
background: #2AA9E0;
}
.foot li:nth-child(3){
background: #8892BF;
}
.foot li:nth-child(4){
background: #F0DB4F;
}
a:link{text-decoration: none}
a:hover{text-decoration: none}
a:visited{text-decoration: none}
a:active{text-decoration: none}
.content {
padding-right: 5%;
padding-left: 5%;
}
Any ideas?

Answer 1

You're using floats, so there's a good chance your last element is a pixel or so too wide for the container it's in and it's floating to the next line.
Try changing the width to 24% on each element and you'll probably see all four.
If you don't want to play with the width, try adding this to your css:
* {
box-sizing: border-box;
}
That includes any padding/margin in the width so that 25% width will be the true width instead of 25% plus padding/margin.