CODEWITHSUNDEEP
htmlcss
rnk
rnk

Reputation: 2204

css - centering the logo

I'm trying to top - center the pinterest logo for just checking purpose. But it is not perfect when I compared with Pinterest website.

Please Check this http://jsfiddle.net/Nwk5Q/embedded/result/

Then go to http://pinterest.com You can see that the logo is somehow differing in the left position.

I checked in my computer and saw that it was around 10px difference in the left position. Why is it so? I copied the same code which pinterest is using.

Upvotes: 1

Views: 150

Answers (3)

Hidde
Hidde

Reputation: 11961

Did you do this:

html, body {
  margin: 0;
  padding: 0;
}

Upvotes: 0

Christoph
Christoph

Reputation: 51261

It's called scrollbar:-D

Since you have left:50% and the standard-scrollbar is 20px wide, you are left with 10px offset;)

You can add

body { overflow-y:scroll }

to be sure.

Upvotes: 5

koela1
koela1

Reputation: 225

The reason is that in the pinterest website there's a scrollbar that shortens the width of the site. It pushes everything a bit to the left.

Add the css

html { overflow:scroll }

And you'll see there's no difference

Upvotes: 1

Related Questions