# Padding / Margin in global header

**URL:** <https://community.hubspot.com/t/padding-margin-in-global-header/95477>\
**Category:** Blog, Website & Page Publishing\
**Tags:** templates, website-pages, professional, landing-pages\
**Created:** [December 6, 2023, 10:17am UTC](https://community.hubspot.com/t/padding-margin-in-global-header/95477 "2023-12-06T10:17:39Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![JRooney1987](https://avatars.discourse-cdn.com/v4/letter/j/4491bb/32.png) [@JRooney1987](https://community.hubspot.com/u/JRooney1987)\
**Post date:** [December 6, 2023, 10:17am UTC](https://community.hubspot.com/t/padding-margin-in-global-header/95477/1 "2023-12-06T10:17:39Z")

</div>

Hi all,

I’ve been working on a new landing page using a global header that includes a left-aligned logo and a navigation, but I can’t figure out how to reduce the gap between the logo and the first menu item. The reason I need to reduce it is 1) because the menu is spilling onto a second line, and 2) to match the client’s actual website.

I assume I need to edit the padding/margin of the logo or the menu, but can’t find the correct line of code in the Design Tools.

Thanks!

John

---

<div class="post-metadata">

**Author:** ![GRajput](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/grajput/32/102020_2.png) [@GRajput](https://community.hubspot.com/u/GRajput)\
**Post date:** [December 6, 2023, 1:36pm UTC](https://community.hubspot.com/t/padding-margin-in-global-header/95477/2 "2023-12-06T13:36:31Z")

</div>

Hi @JRooney1987

Can you please provide the link of the page.

Thanks!

---

<div class="post-metadata">

**Author:** ![JRooney1987](https://avatars.discourse-cdn.com/v4/letter/j/4491bb/32.png) [@JRooney1987](https://community.hubspot.com/u/JRooney1987)\
**Post date:** [December 6, 2023, 2:03pm UTC](https://community.hubspot.com/t/padding-margin-in-global-header/95477/3 "2023-12-06T14:03:02Z")

</div>

Of course! It’s here: [https://info.technichegroup.com/techniche-ev](https://info.technichegroup.com/techniche-ev)

---

<div class="post-metadata">

**Author:** ![GRajput](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/grajput/32/102020_2.png) [@GRajput](https://community.hubspot.com/u/GRajput)\
**Post date:** [December 7, 2023, 7:58am UTC](https://community.hubspot.com/t/padding-margin-in-global-header/95477/4 "2023-12-07T07:58:42Z")

</div>

Hi @JRooney1987

Please add this CSS to the header module.

@media(min-width:767px){  
.header\_\_menu-item--depth-1 {  
padding: 0px 0.3rem;  
}  
.header\_\_container--left .header\_\_menu-col {  
flex: 4 0 0;  
}

}  
@media(min-width:991px){  
.header\_\_container--left .header\_\_menu-col {  
flex: 3 0 0;  
}  
}

Hope this will helps you out. Please mark it as **Solution Accepted & Upvote** to help other Community member.  
Thanks!

---

<div class="post-metadata">

**Author:** ![JRooney1987](https://avatars.discourse-cdn.com/v4/letter/j/4491bb/32.png) [@JRooney1987](https://community.hubspot.com/u/JRooney1987)\
**Post date:** [December 7, 2023, 11:31am UTC](https://community.hubspot.com/t/padding-margin-in-global-header/95477/5 "2023-12-07T11:31:18Z")

</div>

Thanks for that Gaurav. When you say add to the ‘header module’, where do you mean specifically? I tried adding it into the Head section in the landing page editor (Settings → Advanced) but that didn’t work.

In the Design Tools there are three sections I can edit:

module.html

module.css

module.js

I added to module.css but nothing seemed to change.

---

<div class="post-metadata">

**Author:** ![GRajput](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/grajput/32/102020_2.png) [@GRajput](https://community.hubspot.com/u/GRajput)\
**Post date:** [December 7, 2023, 12:34pm UTC](https://community.hubspot.com/t/padding-margin-in-global-header/95477/6 "2023-12-07T12:34:24Z")

</div>

Hi @JRooney1987

There will be a module folder in your theme. You will find the header module in that folder, then go to the header’s module.css editor and add your css in it.

 ![GRajput_0-1701952435109.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/6/8/6820b60796082ed4114159a77ad2b36dc86a29c7.png)

Hope this will helps you out. Please mark it as **Solution Accepted & Upvote** to help other Community member.  
Thanks!

---

<div class="post-metadata">

**Author:** ![JRooney1987](https://avatars.discourse-cdn.com/v4/letter/j/4491bb/32.png) [@JRooney1987](https://community.hubspot.com/u/JRooney1987)\
**Post date:** [December 7, 2023, 12:49pm UTC](https://community.hubspot.com/t/padding-margin-in-global-header/95477/7 "2023-12-07T12:49:37Z")

</div>

Ahh got it, thanks so much Guarav!