Hi Nataliya,
No problem. Thank you for the gist. Just please bear with me as we troubleshoot. I was indeed mistaken about the setup of the file. So let's try a couple things.
First let's do a little clean up.
1) Please delete <div id="slide-me2" class="layout" style="display: none;"></div> from the footer, which I had given you prior. You shouldn't need that ID. It gets wired in behind the scenes.
2) In the body block, you have your custom <div id="container">'s closing </div> outside the </html>. Please move the </div> above </body>.
Next some questions for you. In the blank site I opened up for comparison, I don't see all <style></style></head><body> tags as shown here in your layout block:
<style>
.small-images { width: 170px; height: 130px; float:left; margin: 20px; }
#container{
width:900px;
}
</style>
</head>
<body>
Were these things you've added yourself? If so, you should really move everything between the style tags into the Header CSS block and delete the embedded style tags. They aren't actually being shown in the header. In your site, they appear in the body code if you view page source. If you also added the </head> and <body> and </body> and </html>, please delete those as well. I am fairly certain the system should add them in behind the scenes.
Finally, you have a bunch of floats on your .small-images. It is possible that because you don't clear the float, they are affecting placement of other elements on the site. My advice would be to add another class to your Header CSS block, perhaps:
.clearfloat {
clear: both;
}
And then in your code, right after you finish listing all those images/links add a div that looks like <div class="clearfloat"></div>
If you could make these changes and let me know the results, we'll proceed from there. If anything I've written is unclear, please let me know.
Thanks,
Klara