Make columns all the same width

Hey I added two columns to my pricing grid and now I can’t get them all to be the same width. Ideally they all don’t off the screen to right either. Any ideas?

Ideally I’d like the the “get started buttons” are on the same level as well if possible.

Here is my site Read-Only: [LINK](Webflow - Ottomatik)
(how to share your site Read-Only link)

I would recommend to use Client-First in order to build, All your tasks are possible but will take some time to figure out what’s happening, most likely cause fonts sizes. If need a consultation write me to

I was able to get your column items to eventually line up properly, but not without some serious restructuring. All this to second what @Bimbi has mentioned above - you need to clean up your class naming system, it’s very unorganized and it’s affecting your design.

About half of the text elements for each bulleted feature had a random text class on it, while the others were unassigned. So styling made on the class would only affect half of the elements.

Also, you were trying to squeeze 5 grid items into a single row nested inside a container with a max-width. Since there was not enough space, you were getting a squeeze effect. The way that I fixed it was by decreasing the number of columns. Other solutions would be to change the parent container to a FLEX and turn on Wrap, which will cause overflow elements to move to the next line. If you want all of the items to be on the same row, you’ll either need to remove them from the container or increase the container’s max-width.

Client first is a global naming convention created by Finsweet that aims to eliminate organizational errors within your project. It can be confusing to wrap your head around initially, but luckily there are tons of resources online from their team as well as from the community, and once you understand how it works your projects will become much more organized and easy to make changes to. Check it out at Client-First Style System for Webflow by Finsweet