Unable to remove margin in left of wordpress css

2 Views

I cannot find the left margin in my wordpress blog. My website is written in html5 and css3 but my blog page is a wordpress blog that has been integrated. I am using the twentytwelve theme which I have customised.

My site is responsive so If you narrow the browser, you will see that it is not moving to the table and mobile versions until a few pixels too late. This is not a problem on the rest of the site so some css somewhere is fouling the blog from accurately jumping to the correct size at the right time.

Read More

On the extreme left of the blog. There is a margin of approx 25-35 pixels which remains no matter how narrow the browser goes. This could be my problem but I cannot find what it is.

I thought it might have been an inherited margin from #main or a .container class but it doesn’t seem to be.

Here is my blog where my problem is.
http://www.kidstart.ie/blog

Can anyone help? I am out of ideas!

Post Views: 2

Related posts

Leave a Reply

3 comments

  1. The style you are looking for is embedded by the stylesplugin, have a look at the source code of your website:

    <!-- Styles cached and displayed inline for speed. Generated by http://stylesplugin.com -->
<style type="text/css" id="styles-plugin-css">
#searchsubmit,.styles .post-password-required input[type="submit"],#respond input#submit{background-image:none}body .site{padding-left:0;padding-right:0;max-width:74.285714285rem}#masthead,#main,#colophon{padding-left:2.857142857rem;padding-right:2.857142857rem}
</style>

    That is the padding you are looking for – use something like this in your /wp-content/themes/kidstarttheme/style.css

    @media only screen and (max-width: 739px) {
  #main { padding-left: 0 !important; padding-right: 0 !important;  }
}

  2. You have an inline style that is setting the padding on #main and thus the space on the left hand side that you see. Remove this section and it will be gone:

    #masthead, #main, #colophon {
    padding-left: 2.857142857rem;
    padding-right: 2.857142857rem;
}

  3. Just looking at your site and you are making width fixed the whole point of responsive is to make your side fluid so use percentages and max-width to control how big it goes

    max-width:700px;
    width:100%;

    This way your website should resize to any device being viewed on