Title: Full width header image
Last modified: September 1, 2016

---

# Full width header image

 *  [daydreamer87](https://wordpress.org/support/users/daydreamer87/)
 * (@daydreamer87)
 * [10 years ago](https://wordpress.org/support/topic/full-width-header-image-5/)
 * Hello,
 * I want to have my header image go across the whole width which I have done successfully–
   though now I want to have no padding either side so it lines up with the navigation
   bar and no padding beneath it.
 * I have created a child theme and added the code below but no matter how many 
   times I refresh, it’s just now changing on screen..
 * .site-branding {
    padding: 0px; } .display-header-text .site-image { margin-bottom:
   0px; }

Viewing 7 replies - 1 through 7 (of 7 total)

 *  [Siobhan](https://wordpress.org/support/users/siobhyb/)
 * (@siobhyb)
 * [10 years ago](https://wordpress.org/support/topic/full-width-header-image-5/#post-7460788)
 * Hi there!
 * I tested on my own installation of Motif and the following CSS worked to remove
   the padding around the header image:
 *     ```
       .site-branding {
           padding: 0;
       }
       ```
   
 * Did you add the above to the style.css file of your child theme? If you can provide
   a link to your site, I’ll be happy to take a look into why the CSS isn’t working
   on your setup.
 *  Thread Starter [daydreamer87](https://wordpress.org/support/users/daydreamer87/)
 * (@daydreamer87)
 * [10 years ago](https://wordpress.org/support/topic/full-width-header-image-5/#post-7460793)
 * Ahh, it’s now working – the only issue I now have is when the page is set to 
   full width, the padding either side of the content area is uneven..
 * Here’s a link to the website:
    [http://www.medwaybeekeepers.co.uk/](http://www.medwaybeekeepers.co.uk/)
 *  [Siobhan](https://wordpress.org/support/users/siobhyb/)
 * (@siobhyb)
 * [10 years ago](https://wordpress.org/support/topic/full-width-header-image-5/#post-7460838)
 * Hi there,
 * I’m glad that that CSS is working for you now!
 * The padding between the main content on full width pages should be even.
 * I took a look over your site and the only full width page that I’m currently 
   seeing is the home page, which only has one image. The image itself isn’t centred,
   which is why the padding around the content may look uneven to you. You could
   centre the image by going to the editor for that page, clicking on the image,
   and using the “Justify” tool from the editor’s toolbar. (You will need to click
   on “Toolbar Toggle” in order to see the icon for the “Justify” tool.)
 * Let me know how you get on with that or if you’re still seeing an issue.
 *  Thread Starter [daydreamer87](https://wordpress.org/support/users/daydreamer87/)
 * (@daydreamer87)
 * [10 years ago](https://wordpress.org/support/topic/full-width-header-image-5/#post-7460841)
 * Oh, sorry I didn’t explain properly. I have linked to a screen shot and highlighted
   where the padding issue is…
 * [http://www.medwaybeekeepers.co.uk/wp-content/uploads/2016/06/example.jpg](http://www.medwaybeekeepers.co.uk/wp-content/uploads/2016/06/example.jpg)
 * If you notice, there is too much padding on the right hand side compared to the
   left. When the widgets are in use this issue isn’t there but for the main page,
   I don’t want to use widgets.
 *  [Siobhan](https://wordpress.org/support/users/siobhyb/)
 * (@siobhyb)
 * [10 years ago](https://wordpress.org/support/topic/full-width-header-image-5/#post-7460848)
 * Ah, I see what you mean! The theme is adding a little bit of extra margin there.
   You could override that with the following custom CSS:
 *     ```
       @media screen and (min-width: 1200px)
       .content-area.full-width {
           margin-right: 24px;
       }
       ```
   
 *  Thread Starter [daydreamer87](https://wordpress.org/support/users/daydreamer87/)
 * (@daydreamer87)
 * [10 years ago](https://wordpress.org/support/topic/full-width-header-image-5/#post-7460918)
 * That hasn’t worked at all I’m afraid! Sorry
 *  [Siobhan](https://wordpress.org/support/users/siobhyb/)
 * (@siobhyb)
 * [10 years ago](https://wordpress.org/support/topic/full-width-header-image-5/#post-7460923)
 * There were some missing curly braces in the custom CSS I provided that will have
   caused it to not work. I’m sorry about that!
 * Please could you try again with the following:
 *     ```
       @media screen and (min-width: 1200px) {
       .content-area.full-width {
           margin-right: 24px;
       }
       }
       ```
   
 * Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Full width header image’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/motif/1.0.11/screenshot.png)
 * Motif
 * [Support Threads](https://wordpress.org/support/theme/motif/)
 * [Active Topics](https://wordpress.org/support/theme/motif/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/motif/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/motif/reviews/)

 * 7 replies
 * 2 participants
 * Last reply from: [Siobhan](https://wordpress.org/support/users/siobhyb/)
 * Last activity: [10 years ago](https://wordpress.org/support/topic/full-width-header-image-5/#post-7460923)
 * Status: not resolved