WordPress Twenty Sixteen – Getting Rid of the Black Border

Wordpress Twenty Sixteen - Getting Rid of the Black Border

If you’re using the Twenty Sixteen theme for your WordPress website and looking to get rid of the black border around the edges, then this is the tutorial for you. It’s some simple code that you can paste into your style.css file and it will be gone!

Wordpress Twenty Sixteen - Getting Rid of the Black Border

Step 1

In my WordPress design tutorials, Step 1 is always to create a child theme. If you have one already – then great – bypass this step. But, if you don’t have a child theme, you need to stop right now and read my post – How to make a child theme & why you need one. In a nutshell, a child theme allows you to create a safe place to put all your design changes so you never risk breaking your theme and your edits are never lost.

Follow the steps in that post to create the child theme, and then you can come back here and continue on with this tutorial. Once you have created your child theme you go to Appearance > Editor to find the style.css file and that is where you put all your code in, or you can access it through FTP.

Step 2

And here’s the code you need to use to get rid of that pesky black border that surrounds the Twenty Sixteen theme. I usually don’t recommend using overflow:hidden on something as large as the site-inner selector, but without it, the black border disappears and then the page scrolls horizontally, which is NEVER a good thing. So, this is the code you need. Place it in your child theme and say goodbye to the border!

Below is my Twenty Sixteen child theme with and without the black border using this code.

Twenty Sixteen Black Border

Twenty Sixteen Without Black Border

What else do you want to know how to do to the Twenty Sixteen theme? Let me know below!

22 thoughts on “WordPress Twenty Sixteen – Getting Rid of the Black Border”

  1. Hi Melissa, thank you for sharing this useful code. Im using twentysixteen them as well, i use your code into my css, however, the bottom and 2 sides black border disappear, but the one at bottom still exists. my blog is http://www.clumsbird.com.cn. thank you very much!

    1. Hi Laman, This code should work. Make sure you’re copying all of it! I can take a look at your site and see what went wrong but that link you provided doesn’t work for me.

      1. So sorry Melissa, url should be http://www.clumsybird.com.cn , however, i suspect the black border at bottom could be due to not enough content on homepage. as right now i just started post my very first article. as i have try open my homepage in different monitor. the bigger monitor size, the bigger black border on homepage. could this be a possible reason?

          1. Hi Melissa, really appreciate your advice. Yes, in the end i found out that there is a line of php code hiding in the black border. The php code is from my child theme functions.php file. As i copy code from online and forgot to include .around them. thx again for your help! Your blog design n posts are really awesome!

  2. For some reason when I am putting this into my child theme’s style.css I am losing my Menu as well as font presets. My website is: matthewpyne.ca

      1. Hey Matthew! I use this code on all my templates and create a child theme via style.css as I detail here: http://www.melissacarterdesign.com/wordpress-101-part-5-how-to-make-a-child-theme-why-you-need-one/ (not function.php though that is another great way to do it) and it always works well for me. Make sure you are pasting it in the right place. I took a look at your site and looks like you were able to get it working with function.php. Let me know if there’s anything else you need help with! Thanks for reading!

  3. I am just starting on WordPress and have been very discouraged so far. I have been reading your blogs and others for help. Where exactly do I paste the above code? Thanks

    1. Hi Sandra. Thanks for reading! WordPress definitely has a bit of a learning curve, but once you get the hang of it I promise you won’t be disappointed.

      The first thing you should do before making any adjustments is to create a child theme. You can do so by following my post here:
      http://www.melissacarterdesign.com/wordpress-101-part-5-how-to-make-a-child-theme-why-you-need-one/

      You can also check out my WordPress 101 series here: http://www.melissacarterdesign.com/tag/wordpress-101/

      Let me know if there is anything specific you are struggling with and I can add a post on it to my blog calendar!

  4. I’m having a similar problem as someone below. I pasted the code and all the black borders have disappeared except the top one. Do you know what I should do to try to resolve this? I don’t know much about messing with code n stuff.

    Link to my site: http://happystrength.com/

    1. Hi Jonah, looks like there is some code on your site that is adding the space up there. If you add this it should do the trick!

      html {
      margin-top: 0 !important;
      }

    1. I cannot share your experience. The advice from this article helped me immediately, so, Melissa, your help is highly appreciated! Your comment on the other hand, Altaf Khan, I find inappropriate and rude.

  5. Hello Melissa, I really like how you exlain things, very understandable and thorough!
    I’ve run into a similar problem as some of the other commenters in that I still have a black bar running along the top and the bottom of the page, those on the sides have vanished as intended. I tried the suggestions you’ve made for the others, but so far they didn’t work. Do you maybe have yet another idea or perhaps a tip where I could look?

    The website is: http://vocarte.ch/comingsoon/
    (The /comingsoon will be removed as soon as I’ve worked out the last kinks :))

    Thanks a lot in advance!

    1. Hi Peter, I took a look at your site and it looks like a simple option would be to try adding:

      body {
      background: none;
      }

      Though this doesn’t get rid of the space there, it does get rid of the black colour so that it won’t show up!

      The more complex solution is to add this to get rid of the black space entirely:

      @media screen and (min-width: 44.375em) {
      body:not(.custom-background-image):before,
      body:not(.custom-background-image):after {
      height: 0px;
      }

Leave a Reply

Your email address will not be published. Required fields are marked *