[Solved] Playing with CodePen, Weird Results.

[Judco]

Small Intro:
I have been building websites from template for a few years now, 90% wordpress. However, I have never truely taken the time`

` to really understand what is going on under the hood, minus a few small custom .CSS alterations which I just goggled to fix. I have taken it upon myself to grab/play with some css & html from codepen – specifically http://codepen.io/MightyShaban/pen/mGjuo

Now I made some alterations to the code and there is an issue I just cant seem to understand. I think the problem lies within the .row class

.row {
  width: 1024px;
  margin: 300px auto;
}

The CSS – http://pastebin.com/t0tj2ycd
The HTML – http://pastebin.com/bbGa6nA1

The Problem: If you look at the screen shot you will see that everything is offset to the right a little: http://imgur.com/0G2s0oh

I can remove ‘auto;’ and manually adjust the px but I cant be certain it is truly centered. I looked over the code several times and tinkered with just about everything. I’m sure if I play with it some more I could figure it out, but I think I have just peered at it for to long. Can anyone have a look?

BTW this is my first post and I just want to add that I love this site and codepen – both fantastic ideas… Certainly glad I have joined the community.

Best Regards,
Judco

[Paulie_D]

It might be of more helpful if you put your code into a Codepen.io example of your own rather than just posting links to code dumps.

[Kingslayer]

Hey =)

http://codepen.io/anon/pen/AwGhK

I created a codepen with everything in it.

When You inspect your code with Developer Tools you see what is happening.

The browser is adding:

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px

To the ul and to the figure element.

the lines below fix the specific problem

ul.items {
width: 100%;
display: table;
padding:0;
margin: 0;
}

ul.items li figure { margin:0; padding: 0 ;}

Or you use a css-reset to avoid these kind of problems.

http://www.cssreset.com/scripts/html5-doctor-css-reset-stylesheet/

[Judco]

Thank you both for the timely replies. I will certainly look into this. I have never heard of reset code. Thanks for introducing me to that. I’ll have to research how reset code works and how to use it. Also i have no idea what “-webkit” means, so I have plenty of things to research, If anyone has any good resources on this stuff feel free to share. otherwise I’ll submit a few queries into Google.

It might be of more helpful if you put your code into a Codepen.io example of your own rather than just posting links to code dumps. >

As for why I didn’t post it to code pen..It is because I took the code straight from codepen and I didn’t figure re-uploading it would fix the issue. The only thing I have really changed are some of the colors.

[Author]

Posts