I'm currently working on a portfolio site and using Scrollit.js, jquery-1.10.2.min.js, and a Responsive Grid System to create it. However, things are not going as smoothly as I had hoped. Here is what's happening:
^There seems to be some unexpected blue color showing up, especially in larger windows.
^This issue isn't too big of a deal.
^The real problem arises here. The background should be white, but there's unwanted blue peeking through at the top and bottom. This issue persists even in smaller windows.
^It's just so frustrating!
I've been struggling with this for hours, going back and forth with my code. I'm stuck and not sure what steps to take next. If anyone could provide some guidance or suggestions, I would greatly appreciate it! You can find the code on this fiddle: http://jsfiddle.net/p28w9/ I believe the problem lies within this CSS snippet, but I can't quite pinpoint it, which is why I need some assistance. >.<
/* SECTIONS */
section {
padding-top: 60px;
height: 838px;
width: 100%;
}
#work {
margin-top: 200px;
padding: 50px;
}
section:nth-child(odd) {
padding-top: 260px;
height: 320px;
background-color: #1ab7ea;
color: #fff;
}
/*.section {
clear: both;
padding: 0px;
padding: 20px;
}*/
section .content {
margin: 160px auto;
max-width: 640px;
}