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);

Change the

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


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);


max-width: $(content.width);


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; }


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


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…

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.

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!

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.

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 ]

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!

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?

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

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!

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!

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?
Eilidh xo

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.

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?

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?



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.



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?

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.


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 πŸ™‚

Ahh thank you so much! Perfect response πŸ™‚ Keep up the great tutorials, love your blog πŸ™‚

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!

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!


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

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 πŸ™‚

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!

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.

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!

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.

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; πŸ™‚

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; πŸ™‚

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?

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 Thanks again!

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

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.


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

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.

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.

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

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!

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

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?

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.

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.

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?

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

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?

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.

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! πŸ™‚


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

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 πŸ™‚

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!

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? πŸ™‚

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.

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! πŸ™‚

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?

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.

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!
I read through the comments here to try and fix it myself but I can’t seem to. Thanks!

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! πŸ™‚

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!

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?

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!

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 πŸ™‚

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: which is where you can see that the Page List is off.

My goal is to have it look just as it does here:, 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!

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

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?

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.

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

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

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.

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

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.

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


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

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

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

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.

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:

Thanks so much again for the tutorial.

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 πŸ™‚

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!

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!

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.

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.

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

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.


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 ☺️