Creating a responsive table

Design help General
1

I’m trying to create a responsive table in a container using a row of 3 columns.

I’m trying to create a table with sub-headers and strokes to create a single bar in a lighter shade to the main header. I’m using the strokes to create the table.

The row includes 3 columns. It appears the far left and right columns have an overlap on both sides. So when I add a container or a section and colour the background, I get a gap between columns 1-2, and an overhang on column 3. See below.

I’ve enabled a troubleshooting link here: https://webflow.com/design/tshootflow?preview=8c8ac31d213e6d9afe2aab964ffec6be

I’m sure it’s something simple but I can’t seem to nail it. Any ideas?

Thanks!

2

Hi @grandtheftpixel By default the columns have 10px padding on the left and right. What you can do is select the left column and replace left and right padding with 0.

Also, a tip for you - use Container elements only when you want to center content inside of the browser window (dropping it into the section or dropping it into the body. The Block element (div in html) is good for general purpose wrapping - what you’re using the container for right now).

3

Thanks @thesergie! That worked perfectly. Thanks for the tip.