The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Playing with CodePen, Weird Results.

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #176882

    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

    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 –
    The HTML –

    The Problem: If you look at the screen shot you will see that everything is offset to the right a little:

    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,


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


    Hey =)

    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;
    margin: 0;

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

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


    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 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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.