Hello guys,

I was making one of my test websites. To make Responsive Design before, I used some Grid FrameWorks like TinyFluidGrid. But this is the first time I am doing it manually using target / context = result formula.

Everything was going fine until I laid a 960 Grid overlay in my page. To my horror I saw that it's not matching. I am giving an screenshot of my problem here:

8bi.png

Note that the Context is 780px and the Search bar should be 540px (including 10px border on each side, so total: 520 + 10 + 10 = 540) wide. I used the target / context = result formula and it resulted to 66.666667%. Well, not only the search bar but everything there is not matching the grid. What's the problem?

I am attaching my web files here. Download it and PLEASE PLEASE solve my problem. Code is clean and comment is included, so there should be not problem. I have attached the 960 GRID OVERLAY JQuery plugin. So, just click GRID ON on the top left of the screen and you can see the grid. By the by, I have already torned my hair to solve the problem but I don't see any reason why that thing is happening.

The web file (ZIP):
grid_problem.zip