Make header, navigation and footer full width in Blogger

I’ve had a lot of requests for this lately so today I’m going to show you how to make your header, navigation and footer full width in Blogger. The way your template is set up is to have margin, padding and max-width values to “construct” your layout. In order to make your header, navigation or footer full width we have to remove these and re-add them to just the main content (post area + sidebars).

Please note that this is just to make the area wider, so you can apply CSS to the full screen. If you’re using a header image and the image is only 900 pixels in width, this tutorial won’t alter that. It will allow you to add a background colour using CSS to span the full width of the screen behind your image.

before + after example

Rollover/Hover-over the image to see a before and after example

Q. What are those values with the $ beforehand in my template?

Any code in your template that looks similar to $(example); is basically code that’s controlled by the Variables at the top of your CSS and is used by the Template Designer (Template > Edit > Customise). You can edit the default variable code or edit the main CSS area (changing from variable values to “real” values such as a colour or number) but if you remove the variable code then altering the related options in Template Designer won’t work so take care when doing so. More on this in a future tutorial.

How to make your header, navigation + footer full width

You can do this by editing the variable values as explained above which I plan to do a post on in the future, but we’ll stick to editing the main CSS as it’s easier to explain and understand. Please not that code shown below may look different in your template.

1. First we need to go to your main CSS area. Go to Template > Edit HTML and click the black arrow on the left beside the following code

<b:skin> ... </b:skin>

2. In between <b:skin> and </b:skin> search for body, it’s one of the first codes. You’ll see code similar to

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
}

Change the

padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);

to

padding: 0px;

3. Search for .content-inner. This is the section that wraps (combines) your header, navigations, posts, sidebar and footer. Search for it, skipping the variable section and find something that looks like

.content-inner { padding: $(content.padding) $(content.padding.horizontal); }

This is the code we talked about earlier. The $(content.padding) is defaulted to 10px and $(content.padding.horizontal) is 40px as set in the variable section. We want to remove this 40px padding that’s on either side of our content so that the header won’t have spaces. Change it to look like

.content-inner { padding: $(content.padding) 0px; }

or if you prefer

.content-inner { padding: 10px 0px; }

4. Now look for the section of your template below </b:skin> that looks like

<b:template-skin> ... </b:template-skin>

5. In between <b:template-skin> and </b:template-skin> search for .content-outer, .content-fauxcolumn-outer, .region-inner and find something similar to

.content-outer, .content-fauxcolumn-outer, .region-inner {
        min-width: $(content.width);
        max-width: $(content.width);
        _width: $(content.width);
      }

Change

max-width: $(content.width);

to

max-width: 100%;

this will change our blog width to be the full size of the browser.

6. Find

]]> </b:template-skin>

and add the follow code above it to change the main content area (posts + sidebar) your blog width and centred.

.main-outer { max-width: $(content.width);  margin: 0 auto; }

or

.main-outer { max-width: 1000px;  margin: 0 auto; }

7. Again find </b:skin> and add the following above it

.tabs-inner { padding: 0px; } .section { margin: 0px; } .header-inner .widget {margin: 0px; }

8. Save the template and you should be able to see a full header, navigation and footer area now with your main content staying the same width as before. I’ve tested this in all default Blogger Templates and it works, a few templates need more/less editing that others.

Centre header image?

Because you’re making these areas full width, they will probably default to appearing on the left unless you already have coded them otherwise. If you need to centre the header image, check out this tutorial.

Post last updated:

137 responses to “Make header, navigation and footer full width in Blogger”

  1. mia

    It says to me: “Invalid variable declaration in page skin: Variable is used but not defined. Input: content.padding”

    Made everything just like you said, expt content-inner thing. I have there only “padding: 0;” . So nothing like that: “padding: $(content.padding) $(content.padding.horizontal);”. What can I do? And continue, If I put there only: “.content-inner { padding: 0px; }” It makes my whole blog background white…

    1. Hello. What’s your URL so I can check the template you are using and your code? You should skip the variable section and not alter anything there, if .content-inner is already set to padding: 0px; then leave it as is.

  2. Hi, I did everything as instructed and then the only bit of background that showed was a strip at the top, which isn’t want I wanted. (I only want my header, nav bar & footer full width, like your site’s layout.) Sounds like I might be having the same problem as the person who commented before me?

    I also went back and previewed each change before I ended up reverting, but nothing seemed to make a difference in leaving the background showing through on the sides of the main content. I also only have one content column and no sidebar, I don’t know if that makes a difference.

    I ended up reverting to my saved template for now.

    Thank you for your help!

    1. Hello! Make sure you’re completing step 6 in exactly the right place before ]]> </b:template-skin>. I can’t be much more help without seeing the code in your template in order to check everything configured correctly and not conflicting with other code. Have checked your blogs code and it should definitely work.

  3. Brilliant thanks.

    I used
    margin-left:auto;
    margin-right:auto;
    to center it all up again too.

    1. I have this problem and my nav bar has been padded but I can’t get it to be centered. Need help with it and followed all the instructions to a tee, but nothing works, 1st timer at all of this. Much appreciated any and all help in this!
      [**PROBLEM: NAVBAR is not centered but aligned to the left]
      [**WHAT I WANT: To center the navbar after I have full width the blogger ]

      1. Hello. Find #cssnav and add text-align: center; between the brackets 🙂

        1. Thanks! That resolved it!
          Let me ask is it possible to put Drop Cap in the description header of blogger?
          If so can you do a tutorial on that or just send me the link to it.
          Again thanks and take care!

          1. Hey, it would be similar to this tutorial but using the headers title or description class instead of the selectors (h3.post-title) shown.

  4. Daniel

    Thank you, you helped me a lot.

    But now, how can I make the footer content stay centered? The main-content area is centered just fine, but the widgets of the footer still expends to 100% width. What do I do?

    1. In step 6, instead of using .main-outer { max-width: $(content.width); margin: 0 auto; } use .main-outer, .region-inner.footer-inner { max-width: $(content.width); margin: 0 auto; }. This will keep the footer full width but make the footer content the same width as your main content area (blog post + sidebar).

  5. This was beyond helpful! I set up everything in each step as you said, but the outer wrapper is still pretty large. Any tips on how to get rid of the outer wrapper on the left/right/upper margins?

    Thank you again for your help! This was the best/easiest tutorial I have found online!

    1. Ah thank you. What section do you mean lovely? The one with your blog posts & sidebar?

  6. Thank you so much for this website and all of your tutorials. I have pinned just about all of them, and I am excited to utilize your knowledge with my personal blog and in helping fellow bloggers. You are a wonder!

  7. Awesome tutorial!
    The only problem I have is that I can’t center my blog’s header. Could you help me?
    Thanks!

    1. Hello, thank you! Try the steps in this tutorial and let me know if they work for you.

  8. How can I make my header the full width without making my footer or navigation bar the full width?
    I’m also wondering if you can tell me how to have an image such as a ribbon as the background for my navigation bar?
    Thanks,
    Eilidh xo

    1. You’ll have to do this tutorial to remove the max width that is set on your blog, then in step 6 add the selectors of all elements excluding the header. That step will give them max width again while keeping the header full width. Does that make sense? Add background-image: url('DIRECT IMAGE URL'); to the navigation bar in your CSS, replace DIRECT IMAGE URL with the link to the image file.

  9. Anna

    Hello! everything turned out great, but for some reason my header and footer are pulled all the way to the left, and I can’t seem to get it centered with the posts and side bar {that are centered}. Anyone know what to do to fix this?

    1. What is your URL?

  10. I did everything as instructed and it did not work for me. :/

    1. Hello, have had a look and it appears to be working?? Your header, navigation and footer area’s are now full width.

  11. Thanks so much for sharing! This is just what I’ve been looking for.

    The only problem is my navigation bar isn’t full width. On each side, left and right, it has a some padding but I can’t figure out how to get rid of it. The rest of the header seems to be full width. Any ideas on how to get the navigation bar full width?

    Thanks!

    Stephanie

    1. Hello, add the following code to your CSS .tabs-inner { padding: 0px; } .section { margin: 0px; }

      1. Stephanie

        Perfect, thank you so much! You are awesome! 🙂

  12. Athena

    Hello! This is fantastic! I was just wondering how I can only make the custom nav bar full width? I actually followed your tutorials to make both the nav bar and to place the nav bar above my header. But I just can’t figure out how to only make the custom nav bar full width.

    Thanks!

    Athena

    1. You’ll have to do this tutorial to remove the max width that is set on your blog, then in step 6 add the selectors of all elements (header + footer as well as the main content section which is already shown) to give them the max width again while excluding the navigation bar. Does that make sense?

  13. AJ

    Hi, I have the same problem as the commenter above me. I followed the steps and it was perfect, other than needing to center my header. I followed your other tutorial, and it worked. But now that it is centered, it doesn’t reach the edge. I thought maybe my header wasn’t big enough to reach,s o i edited the size but it still happens. There is also a gap at the top. Is there a way to fix this?

    I already have the code you gave for the last commenter in there, so it’s not that.

    Thanks!

    1. What’s your URL?

        1. Find .content-inner and change the values to 0px 0px;. Go to Layout > Navbar and make sure it’s turned off, add body .navbar { height: 0px; } to your CSS to remove any code that might be associated with it. The gap on either side of your header is because of the size of the image. The header image is only 1600px wide. This tutorial is for making the header area wider, but it will not automatically make an image the full width. If your final header is going to be similar to this test one, there’s a much better way of doing it than using a large image which will slow down your page load. Add #header-inner {background: #HEXVALUE; } to your CSS, change HEXVALUE to the hex value colour of your header background. This will span full width, no matter what size the screen. Then upload a header image of the blog name in your chosen font, on a transparent background in .png format. This way the header image will be smaller in size and quicker to load. Hope this makes sense and helps 🙂

          1. AJ

            Ahh thank you so much! Perfect response 🙂 Keep up the great tutorials, love your blog 🙂

  14. Hi!
    I have been trying to get my header (which is actually an html gadget) to reach the full span of the screen. I’ve gone in and removed the header widget from my design so the html would act as the new header.

    Do you know how to work with this? I’ve gone ahead and added you as a reader to my blog…it’s currently private with all the changes being made.

    Thanks for any help you can give!

    1. Hello Shannon. This tutorial is for making the header area larger to allow you to fill the entire screen using CSS (so having a header background image for example), but it won’t affect the header image. On my laptop your header image is more than full width, causing a horizontal scroll. On my computer it’s almost full width. On a larger screen or TV, it will differ in size. The reason is your image is only 1600px wide, so it can’t go any wider without stretching. The best way to set up a full width image is to do so responsively, I’ve not got a tutorial on this yet unfortunately. You could also set the image to 100% width and then add .header-inner .widget {margin-left: 0px; margin-right: 0px;} to your CSS, but this may make the image look stretched on some screens. I also notice you’re using image maps, while this is fine for certain things I notice you’re using it to combine the image, your header and navigation into one. You may find this article useful about why image maps aren’t recommended for these things, there’s also some alternative ways to accomplish the same look. Hope this makes sense and helps you, let me know if you have any other questions 🙂 beautiful design bdw!

  15. Hi!

    I have been trying to get my header and navigation bar to be the full width of the screen. However, after I followed the tutorial, my entire website background turned white? But my outer background is supposed to be a light grey (#eeeeee). I’m currently using the simple template that blogger provides us with.

    Would you happen to know what’s going on here? I’ve added you as a reader to my blog… thank you so much!

    P.S. Do you know how I could also extend the lines around the nav bar to be full width? Thank you again!!

    1. Hello. There’s custom code in the CSS section of your template to apply a white background to .content-inner, find it and remove background-color: #ffffff;. You can then apply it to wherever you do want a white background such as the main content area which would be .region-inner.main-inner.To make the nav border full width, find #nav and change the width to 100%, do the same for #NavMenu and #NavMenuleft. Remove the negative margin values from #nav and finally find .header-inner .widget and remove the margin values. Hope this helps 🙂

      1. Ahhh it worked! Thank you so much! But there’s some white space on the sides (i made the nav bar black for the time being). Do you know how to get rid of the side space and the space above the navbar? Thank you!

        1. Hello, you missed the last step to find .header-inner .widget and remove the margin values. If it’s not in your code then add .header-inner .widget {margin-left: 0px; margin-right: 0px;} above ]]> </b:skin> in Template > Edit HTML.

          1. Thank you so much! It worked. I’m trying to do the same with the footer, but when I used #footer { } it doesn’t work. Is their another code that I could possibly use?

            Thank you!

          2. To remove the gap in the footer, find .content-inner { margin-top: -25px !important; } and change it to .content-inner { margin-top: 0px !important; }, then .footer-inner { padding:30px 15px; } and change it to .footer-inner { padding:0px 15px; }. Go to Layout and remove the empty HTML5 gadget in the footer area. Then in Layout, click edit on the gadget with your Navigation code. Remove <p style="font-family: cantarell;"></p>, it’s not linked to anything in the navigation and just causes a blank space.

  16. Hello! I tried your tutorial and for some reason it is just not working. I have a fixed nav bar, but the width of it will not expand. any help will be much appreciated! xo

    1. Hello, find #PageList1 and change center: 0px; back to left: 0px;, add background:#CC9999 !important; before the closing bracket. Then find .tabs-inner .PageList li a and remove margin-right:-7px; 🙂

    2. Hello, find #PageList1 and change center: 0px; back to left: 0px;, add background:#CC9999 !important; before the closing bracket. Then find .tabs-inner .PageList li a and remove margin-right:-7px; 🙂

  17. First, let me just tell you how incredibly helpful all of your tutorials are. I am such a beginner at all of this CSS and you make it so easy to understand! I followed your steps to get my header and nav bar to fit the full width of the screen and it worked like a charm. It was adjusted to the left so I then followed your steps to get it back to the center. However, it left my nav bar still set to the left. I’m having no luck fixing it on my own. Can you help a girl out?

    1. Hello. Is it wrapped in a div? If it is apply the center code to the div or add a padding to it to move it over to the ideal position.

  18. hello, thanks for the tutorial. I just read through both of your tutorials this one as well as the one that is more customizable. I am totally a newbie at this but I believe that I can do it. Right now my header is an image that I made and then mapped out certain parts to create links. Will I need to make a new header after I get a drop down menu? Which is no problem to do. Also, which should I do first, make a new header or make by drop down menu? And, which tutorial should I follow? This one or the more customizable one? Thank you so much! I am so glad that I found this tutorial. One more thing, do you have a tutorial to make a floating navigation bar that follows you down the page like this, follow me, on this website http://www.the36thavenue.com/ Thanks again! http://www.hawthorneandmain.com

    1. Hello! I’m not sure I understand. Your header and the dropdown menu won’t be connected, so you can leave the header you have as is if you want. This tutorial is for making the header area full width, it won’t change your header image. I have a tutorial here for the sticky navigation bar.

  19. Step 3 was all I needed to do really. It worked perfectly! Thanks so much

  20. It worked great but it keeps coming up with this message “The element type “b:template-skin” must be terminated by the matching end-tag

    1. For step 4, 5 and 6 make sure you’re not removing any code at all and closing off any code that you add or change. You should see ]]> </b:template-skin> above the script for Google Analytics which is above </head> in your template.

      1. Thank You, I started it again and it works now.

      2. Quick question, How do you put the tabs above the header at the top of the page?
        Thanks

        1. Here is a tutorial to move gadgets above your header. This tutorial is also handy for placing navigation at the top of your blog 🙂

  21. Hi!

    I’ve followed all the steps but it seems that my header and navbar both went left? That or there’s an extra space to the right. Also, I’ve made the height for the navbar 0px so it would go away but the top hasn’t moved at all 🙁

    Perhaps I coded something that would interfere how it works or I just did a step wrong?

    Other than that it seems to work okay for the footer^^

    1. Hello 🙂 They went left because they default to be left aligned and there’s been no CSS added to tell them otherwise. See the tutorial under the heading “Centre header image” at the end of the tutorial. The code for your navbar has an error, it should be body .navbar not body. navbar. You could add it like body .navbar { height: 0px !important; } to make sure it overrides Bloggers default.

  22. Your post is wonderful.
    I have another question. How to make the sidebar full width. I want to make the header on the right of the sidebar. And take place of the space with post and aidebar.

    1. Thank you Cai. I’m not sure what you mean by making the sidebar to be full width, then it would take the place of the blog post area? You can use this post to unlock your header and move it to the sidebar.

  23. Hi just wondering if I can ask for your help. I did this tutorial with my blog and I can’t get the header and nav bar to run the full width of my blog, I love my template but hate that the sidebar is up so high….could you please help me! Thanks so much

    1. Hello, to get the header and navigation full width and move the sidebar down is going to take some coding work because it’s a custom template. If you go to Template > Edit HTML and find .sidebar, change margin:-180px auto 0 3px!important; to margin: 0px auto 0 3px!important;, then you’ll have to move the code for header and tabs back up to the default Blogger position above the main content area. Hope this helps!

  24. OMG! Ellie! That’s perfect. Now I can show you mine.. thanks! Love your blog…

  25. I have done everything you said to do on here. But it somehow removed my Blog body background color an I can’t figure out how to get it back.

    1. Hello Elizabeth, your blog is private so I can’t check the code for you, could you invite ****@gmail.com to Settings > Basic > Permissions > Add Author and I’ll have a look.

  26. This worked just how I wanted! Thank you SO much!!!!!!

    Is there a way I can make my footer’s background transparent? or make it so it is not full width?

    1. Hello, yes just add background-color: transparent; to footer 🙂

  27. Guillaume

    It still has a little bar at the right that make things not really centered. Can you help? Thanks!

    And, I would like to have my page tabs align left with my “Post section”, could I do it? Thanks again.

    1. Hello, the bar on the right of your blog isn’t part of your page, it’s signifying an error. I can’t tell what it is from here but it could be the following – you have an error in your template, the line &lt;meta content=' 1100' name='viewport'/&gt; should be &lt;meta content="width=1100" name="viewport"&gt;. It also appears that you are adding blog posts from MS Word Documents, which should be avoided as it adds extra code to your HTML which is not properly recognised, this could also be causing the issue. A text editor should be used instead or you could un-format your posts after pasting content.

  28. Hi! This is an excellent tutorial! However, do you have a tutorial on how to change the “blank spaces” padding + margins on the left side? I want to create more white space on the left side of my blog and not have posts stretch as far across the screen – my header/footer/navigation is already full width. Do you have a tutorial, or know where I can go in the HTML CSS to find it?

    1. Hello, thank you Julie. Do you mean by your main content area? It’s currently centred so I wouldn’t recommend adding blank space to the left as it may disrupt the overall look if someone is using a smaller screen size. If you don’t want your posts as wide I’d recommend making the overall width smaller. You can do that in the Template Designer (Template > Customise > Adjust Widths).

      1. Yes, thank you! I mean the main content area. I would like more white space around the main content area. When I go into Customize Template>Adjust widths, there is only an option to adjust the right side bar and the entire blog. If I adjust the right side bar, it just makes the right sidebar larger and scoots the main content area over. I like the sidebar the size it is. Is there another option that you know of? Or tutorial you offer?

        1. The entire blog is the main content area with space and the right sidebar together. So by making that smaller it makes the blog area smaller and keeps the sidebar the same as whats set for it. Does that make sense? You can manually do it, although it is messier to do, by adding #main { width: VALUE px; margin: 0 auto; } above ]]> </b:skin> in Template > Edit HTML.

  29. HI!
    I could not find in my HTML. Can you guide me where and which to follow the tutorials above? Your help is much appreciated. 😉

  30. hello! I did this on my blgo and it went perfectly! I just want to ask, how do I lessen the ‘blank space margin+padding” area on my blog? normally I wouldn’t mind it on my blog when I use a laptop but whenever I use a desk top it sort of bothers me, I was jsut wondering how to lessen that much space so that I can use more space for my blog post and side bar area.

    Thank you! 🙂

    xx
    Sarah

    1. Hello Sarah, the only way to lesson the “blank space” area on your blog is to make your content area wider. You should be able to do this in the Template Designer (Template > Customise > Adjust Widths).

  31. Sarah

    Hi there Ellie,
    Sorry to bother you but I am having problems with my blog.
    I have followed the tutorial to make header, nav bar and footer full width, however I can not centre the footer, nav bar or header afterwards. I have followed your other tutorial on how to centre and it still is not working. I think there is a problem with my template because when I add codes in > Advanced > Add CSS nothing changes even when codes are applied. Also I have followed the sticky nav bar tutorial and it just does not apply to my template. Nothing changes, I just get the code showing up my actual website.
    Can you please have a look at my template to see what is going wrong? I appreciate the tutorials and the time spent. I have added you to my blog permissions section. Thank you 🙂

    1. Hello, go to Template > Edit HTML and search for ]]> </b:skin>. Above this you should see the CSS you added to the Advances CSS section of the Template Designer (Template > Customise). Go through the code above ]]> </b:skin> and check for errors. Any errors will stop the CSS below it from working. If the code is showing up on your template it means that you are adding it to the wrong place, so double check the tutorial and make sure you are adding it exactly where stated. Hope this helps!

  32. Hi! I have a quick question. After making everything full width I would like my “footer gadgets” to be evenly spaced out, but right now the gaps are too big and closer to the left side of the blog. How can I change this? 🙂

    1. The code .footer-inner {padding: 0px 20px;} will add padding to either side of the footer, so that content isn’t againest the edge of your blog. The space between other widgets can be altered in a similar way.

  33. thank you very much, I’m going to change my blog template.
    visit me back please 🙂

  34. Hi Elaine!

    Thank you so much for your help on my previous issue!!! You truly are the best. One more question, I successfully made everything full width, but now my header image is off center and does not move with the browser window. How can I fix this?

    Thanks! 🙂
    Anna

    1. Hi Anna, adding #header-inner img { margin: 0px auto; } should center the image properly again 🙂

  35. I followed the instructions carefully and I was able to have my header and footer full width, problem is, the width is too long. It doesn’t fit perfectly on my screen. How should I fix this?

    1. Hello, you still have a max-width value on content-outer (step 5) instead of applying it to main-outer and a lot of unnessecary CSS on .footer-outer that it causing the horizontal scroll.

  36. Hi! This tutorial was very helpful! For some reason, there seems to be a gap (maybe padding?) around my footer and I would like it to stretch all the way across. My url is http://www.these-days.com!
    I read through the comments here to try and fix it myself but I can’t seem to. Thanks!

    1. Hey Jade. Follow step 3 above to remove that padding, you could also set both values to 0px to remove the space below the footer.

      1. Thank you so much! I actually had that but somehow an extra “content-inner” had shown up (aka I accidentally put it there). Works perfectly now! 🙂

  37. Thank you so much for the tutorial! But, as you’ll probably be able to tell, I’m having some issues. If you have the time I would love some help! Anyway, the issues are pretty evident, but the two things I was wondering about are 1)The white space at the top of the header (along with the arrow… I have no idea where that came from :), is that not part of the editing? and 2) the scrolling that you have to do to see the rest of the header. I saw someone asked this before but I couldn’t figure out the answer… Thanks in advance!

    1. Hello Bethany. The arrow is coming from your template code, so there’s an error in there somewhere. The space is being caused by the top padding value on .content-inner and the height value on body .navbar. I’m not sure what you mean by the second part?

  38. Hello! I’ve followed the stops for this tutorial but for some reason have a horizontal scroll bar coming up at the bottom, and from what I can gather it’s not because of the width of the header image. I know some people above have had similar problems but haven’t been able to figure it out from the responses you gave! Thanks!

    1. Hello, add .tabs-inner .widget ul {margin-left: 0px; margin-right: 0px;} to your CSS to override the minus values that are extending your navigation bar and causing the horizontal scroll 🙂

  39. Thanks so much for this tutorial! Everything worked great, I was able to adjust my main blog content width back to normal, but the Page List located just under my header is positioned all the way to the left, and after quite a bit of trial and error I have been unsuccessful trying to get it to line up with the blog content or in line with the header image. I’ve been playing with it on my “tester” blog page: http://hcblogtester.blogspot.com which is where you can see that the Page List is off.

    My goal is to have it look just as it does here: http://www.hellocreativeblog.com, but I want my footer to span the full width.

    I appreciate your help, and thanks again for posting your great tutorials. You have a great site!

    1. Hello Rebecca. Thank you! You can use .tabs-outer {width: 1000px; margin: 0 auto;} to adjust the navigation.

  40. Hi Elaine, your code works really well but I have a little problem here. I put a picture html code in my template that works as a header since I can’t put the header right under the blog title. The problem is that, the picture’s width is too wide and it couldn’t fit the screen just nice although I have tried to resize it with codes. Thanks

  41. Sorry if this has been asked before but I didn’t see anything in the comments. Everything worked to stretch the Nav bar and header. But now my Nav bar is getting clipped on the ends. The links are cut off especially on tablets or mobile. What did I do wrong?

    1. Hello Jessie. Have a look for negative margin values for the navigation menu, the selector will include the word “tabs” in your template and it’s a default code that Blogger templates have.

  42. aurélie

    Thank you very much for the tip!

  43. I can’t find the .content-inner part of my code anywhere! is it under another name?

    1. Hello, if you have a custom / customised template it might not be included, might be called something else or might be in the main style area before ]]> </b:skin>.

      1. Auburn Kuefler

        what else could it be called?

        1. Hello, just had a look and it’s in your CSS (near the top) under the Columns heading.

  44. Hi, a great tutorial, and it pretty much worked however when you scroll to the right, there is a little white gap in the header, and this is permanently there on mobile devices. How do I solve this problem? Xx

    1. Hello. There shouldn’t be a horizontal scroll, that means something is set too large or overflowing the container. Add .tabs-inner .widget ul {margin-left: 0px; margin-right: 0px;} to the end of your CSS, or replace the margin values for .tabs-inner .widget ul in your template.

      1. Hi, thanks so much for your reply. The css option did not work, however I went into my css and replaced

        width: $(main.column.left.width);
        right: 100%;
        margin-left: -$( .tabs-inner .widget ul);
        }

        .main-inner .column-right-outer {
        width: $(main.column.right.width);
        margin-right: -$( .tabs-inner .widget ul);
        for
        .tabs-inner .widget ul {margin-left: 0px; margin-right: 0px;}

        This did fix the gap problem – but now all of my right side bar icons have gone below my posts and REFUSE to come back up.

        I now also have the issue that on mobile devices the gap may be gone, but the header isn’t centred.

        It was ok before so if you can’t solve the issue please help me get it back to normal!!!!

        Please help!!!!!! XX

        1. Hey Lucia, add back the code you took out and add the CSS I mentioned previously. This will undo the negative values that are associated with your navigation, therefore removing the horizontal scroll and making the content centred. You aren’t using a mobile template so that code will also make it centered on mobile. I don’t see any icons in your navigation so I can’t help with that.

  45. Hi, what if I wanna have the footer and navigation only to look full width?

    1. Hello, add the header class to step 6 to give it to a fixed width again.

      1. Shahzad

        Thanks for your fast reply
        I want to add page navigation in label menu

        1. this post will explain that 🙂

  46. You’re amazing!
    Thank you for the post.
    xoxoxo

  47. I am new to html and was trying to figure out how to make my blog header full length and centre it. This worked by following your tutorials (THANK YOU) my problem is that i wanted to keep the white ‘page’ piece that my blog sat on so you could read my text. Somehow i got rid of this and now all my writing is on chevron background! HELP!! Thank you!!

  48. Hi,

    i’m having trouble with the header. It has gone “too far” to the left and on the right side is bigger then the screen.
    I can’t seem to find the problem.
    Maybe I need a break and to step away from it from a while, but if you know what’s wrong would be great to get a tip.

    Thank you

    ps: by the time you visit the website it may be fixed 😛 I hope so. It would be a good sign

  49. Absolutely love your blog. It’s one of the easiest reads out of the other help blogs.

    I am having problems with my footer. I have getting this annoying white space below my footer and I have tried so many codes that don’t work. How do I remove the extra space below the footer?

    My blog is ThatRusticLife.com

    1. Hey Trevor, edit the padding values for .content-inner in your CSS.

      1. Yeah, I’ve tried that and it didn’t work. Thanks for your help though. 🙂

        1. It’s still set to 10px, needs to be 0px.

          1. I’ve changed it to 0px then changed it back to the original settings after it didn’t make any changes. It’s now saved at 0px and still have the gap below the footer. I must be missing something….

          2. Hey Trevor, the gap is now gone and the footer is in line with the bottom of the browser window. If you’re still seeing the gap try clearing your browser cache.

  50. I implemented the codes and it works great! But is there a way I could make the header, menu bar and footer align up with the main-content-area?

    What I mean is I want the content/widget area of the header, menu and footer to be the same as the “main content width” but at the same time I want the background of the header, menu and footer to span the whole width of the screen. I don’t necessarily want to place the header image on the center but keep it on left but aligned with the main-content-width. Same for the menu bar and the footer. I don’t know if I’m making sense to you but I wanted something like this: http://www.drabdussalam.education.

    Thanks so much again for the tutorial.

    1. Hello, you can add a div (with class="wrap") to those elements and a width value to .wrap, that will restrict the inner width of those elements to be the same as the main content area 🙂

  51. Thanks so much for this tutorial! The only problem that I am having is that it also removed the padding from my posts. My posts are supposed to be a white background, and now my entire site is pale pink, where only the outer and header are supposed to be. Help, please!

    1. Hello Erin, you could probably skip step 7 and add a padding directly to the posts using .main if needed. The above code shouldn’t affect the background colour so make sure you’re not editing anything else and follow the steps exactly. Hope that helps!

  52. thanks so much for this tutorial,,but i want to make my post full width too..how to make that.?

    sorry for bad english

    1. To make everything full width skip step 6, which is adding a constrained width back to the main content section.

      1. ok thank’s before,,
        ^_^

  53. Hye. I have a question on how do I make the pictures in my blog post to be full width. I tried using

    .post-body img {
    max-width: 100%;
    max-height: auto;
    display: block;
    margin: auto;
    box-shadow: none;
    border: none;
    padding: 0px;
    }

    but it didn’t give the result that I want.

    Can you help as to how do I make my pictures full width across the blog post?
    Thank you.

    1. Hi Audrey, your blog is private so I can’t take a look for you. What result are you looking for? This will make the images the full width of the post area size, not the entire blog or browser. You may also need to change the selector (.post-body img) if you’re using a third party theme.

  54. Hi check out my site at https://magnificentduo.blogspot.com how can i adjust the size and not familier with all this codes i need help.

  55. Hi Ellie! Thank you so much for your amazing posts, they have been a great help to style my new blog! 🙂

    I tried this one to make my navigation bar full width across the browser, followed every step, but id didn’t work 🙁 The sticky navigation bar is perfect but the non-sticky is still not full width.. do you think you can help me??

    Thank you in advance!
    xx Inês

    1. Hello Inês, thank you so much. So glad to hear that you find my posts helpful. For the full width navigation, you need to add a background colour to the navigationbar

      1. Thank you for taking the time and replying to me!

        I thought I had that done but I now added that code and bar is fully colored, however there is still a small gap on each side of the page.. and I already have the width set to 100% for the navigationbar, and I followed this tutorial as well. How can I fix it to have have it all the way across the browser? 🙁

        I have my blog set to 1000px in the costomise section.

        xx

        1. You have some errors in your CSS section which is blocking it from being read correctly, that’s why some of the changes you’re making aren’t showing. You’ll need to go through the CSS and remove missing/extra characters. Feel free to email me if you need further help ☺️

          1. I managed to fix it! 😀

            Thank you for everything!

            xx

  56. Thank you so much!! My header being off centre literally bugged me for ages but i’m always so scared of code, but I did this and it was so simple to follow! Thank you so much!!

    Annabel x
    https://annabelreid13.blogspot.co.uk/

    1. Thanks Annabel, so glad it worked for you 🙂

  57. Pratap singh

    In the sidebar in my layout its showing full width CSS.
    What does that mean??

  58. it’s too hard buddy

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up you’ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.