Horizontal alignment of few div's inside centered container

Hi, I need some help and I hope the solution is simple for professionals.
The task is distribution of some layers inside the container.
The trouble is that the border between first right .pic_text is bigger than between first left .pic_text. The container .center is centered, but its content doesn't have equal margins.
I tried to find the solution, but couldn't find it ( for my case.
The matter is that every .pic_text has to have picture and text and the design has to be adaptive.

Here is my code CSS3:

  .center {
	width: 95%; 
	height: auto;
	padding: 10px; 

Remove padding from main page?

Here is the link to my website, I have not customized the photos yet as I wanted to get the layout right before I screwed anything else up.

I am wanting the footer to be higher up, preferably where I do not have to scroll on the main page.



Help a novice get a better grade... please!

I have a project that is slightly over my head so after working on it for a day I don't feel too bad about asking for help. Most of what I need to do is complete but I can't figure out why I can't get my col flush with my header or how to get 25px of padding on col1 without pushing col2 underneath col1. The other part I need to do is to make my collapse button extend col1 overtop of col2 but I know that's javascript. Take a look and see if you can give a novice a hand. I put everything in-line so you can see what's going on.

<!doctype html>

Drop Down Menu Text Showing Behind Photos

I've tried changing the z-index but nothing is changing?? On Chrome the menu appears normal though on other browsers such as Safari it's hiding behind the gallery images (not the home page slider) Maybe someone can help because I've done as much I can think of, thanks heaps !

my website is - White Boda Wedding Photography and you can see when you visit 'photography' you'll see the menu hides behind the gallery.

Why is my page being cut off?

Alright so Im getting content on the side of my page cut off when I resize my page on my desktop browser.

This is what my page looks like when its normal. http://gyazo.com/dedab68fd110b484e64e4500b5e58523

Then I resize my page to make it thinner and I get this when I scroll to the right http://gyazo.com/cc0234a8463431253c57f172af8749f3

It cuts off my content

How do I fix this? Any help would be greatly appreciated! Thanks

<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Syndicate content