Problems with Responsive Web Design

Question

Not really sure how to ask this, but here we go. I am new to responsive web design; always worked with html coding and tables like in Front Page. I have the concept down of sections, then containers, then columns if needed to place my content and images. Several times in my process, I get a page done or nearly done, and then later on, my text or images re-arrange themselves and overlap themselves. In other words, the text layers itself on top of another text. The two images below were laid out perfectly just a little while ago.
The max width of all containers on the page is 940px. It works great, until it doesn't I have not changed any margins or anything to make this “overlapping” of objects occur. I get satisfied with a page, and all the sudden, magically it screws up. What am I missing here? If I highlight the container, it shows a margin on the left of 342px, and a margin on the right of 343px. Looking at the CSS Designer however, these numbers do not show up. Only the 940px. I am not changing the CSS either prior to this event happening. This occurs whether in IE or Chrome.
In this first image, the red breadcrumbs started out being parallel with the search feature, and should be in the gray area. The gray menu text, was in the white area above the gray bar when it looked right. Both sets of items (i.e., red breadcrumb and search feature are set in two columns. Each column with is 50%.
In this next image, the items in the black bar were side, by side. Now they are not, and I did nothing to them or the stylesheet. The mail image column is 8.333%, the join text is in a column that is 25%, and the join us form is in a column that is 66.666%.
Hope this helps you help me!  Very frustrated.

Answer 1

Here is the link:
http://www.destiny-seminars.com/dev/index.html
The dev directory contains:
index.html
contact.html
speaking.html
training.html
about.html
The first page to look at where I had the most recent, most completed page, is - about.html. That will be my template for the rest.  Also, there was supposed to be a feed from my blog showing up on this page; it was also perfect at first. Then, my shaded black site links section and and the copyright footer quit showing up. When I commented out the blog feed code, the footers showed up again. At one time, it all was working. so this is yet another problem I cannot figure out why stuff is changing seemingly by itself.
These pages were originally created in an online tool called webflow.com. It worked great, but they did not honor the full trial changes before they made site updates that eliminated any free use at all. This code for all files and images were exported into a zip file. The CSS files are titles as follows, in the css directory:
normalize.css
timothy-hartwell.css
webflow.css
Please help!