# Gap between footer menu items

**URL:** <https://community.hubspot.com/t/gap-between-footer-menu-items/32198>\
**Category:** CMS Development\
**Created:** [February 23, 2021, 9:51pm UTC](https://community.hubspot.com/t/gap-between-footer-menu-items/32198 "2021-02-23T21:51:37Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![SGriffinKatzcy](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sgriffinkatzcy/32/58551_2.png) [@SGriffinKatzcy](https://community.hubspot.com/u/SGriffinKatzcy)\
**Post date:** [February 23, 2021, 9:51pm UTC](https://community.hubspot.com/t/gap-between-footer-menu-items/32198/1 "2021-02-23T21:51:37Z")

</div>

We want to have the Company primary menu item closer to the bottom of the Partners menu list so there isn’t a large gap:

 ![38498iDFD431B8E63A7FC7.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/8/860e3fdcc9f013f59a7384a4b0190aca393a28c5.png)

Is there a setting to remove that gap? I can’t find that anywhere. If not, what CSS could be added to override that spacing? Thank you.

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [February 24, 2021, 11:01am UTC](https://community.hubspot.com/t/gap-between-footer-menu-items/32198/2 "2021-02-24T11:01:49Z")

</div>

Hi @SGriffinKatzcy, can you provide a link to the page or a preview link so we can inspect the CSS directly and we can provide specific solutions please?

---

<div class="post-metadata">

**Author:** ![SGriffinKatzcy](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sgriffinkatzcy/32/58551_2.png) [@SGriffinKatzcy](https://community.hubspot.com/u/SGriffinKatzcy)\
**Post date:** [February 24, 2021, 1:57pm UTC](https://community.hubspot.com/t/gap-between-footer-menu-items/32198/3 "2021-02-24T13:57:47Z")

</div>

Hi @piersg. Thanks for your reply and sorry for not including the link in my original post. The site is at [https://cylera-7852770.hs-sites.com/](https://cylera-7852770.hs-sites.com/)

If you are able to take a look, it would be greatly appreciated. Thanks!

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [February 24, 2021, 3:22pm UTC](https://community.hubspot.com/t/gap-between-footer-menu-items/32198/4 "2021-02-24T15:22:31Z")

</div>

I think the only real way of doing this is to use the columns and break-after properties without flexbox. You’ll need to switch “platform” and “partners” as they’re being ordered in a column instead of a row. I’ve commented out the styles that need to be removed

```lia-code-sample
.footer .section_right ul {
 /* flex-wrap: wrap; */
 /* align-items: flex-start; */
 /* justify-content: space-between; */
 columns: 2;
}
.hs-menu-wrapper ul {
 /* display: flex; */
 /* flex-wrap: wrap; */
 list-style: none;
 margin: 0;
 padding-left: 0;
}
.hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
 columns: auto;
}
.footer .section_right li.hs-menu-item.hs-menu-depth-1 {
 /* width: 40%; */
 padding-bottom: 20px;
}
li.hs-menu-item.hs-menu-depth-1:nth-child(2n) {
 break-after: column;
}

```

Looks like this

 ![38583i4970D8C0564C89E2.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/a/fa65e9946de0aa1d4d6a42788bba9b7dca481e90.png)