Simple table not responding reliably to CSS

Hi,

I have used your plugin before and discovered it can solve some unusual design problems. However, this time I am running into some weird issues. I am attempting to recreate what is currently occupying the three footer widgets on the Home page. See screenshot: Home page widgets

I am including a screenshot of what I have been able to accomplish, but with the entire table with a colored background. I am able to remove the background but for now it shows where a spacer image (one of my attempted workarounds) is located. The current uniform background color is from adding ‘headings’ to the dashboard field for additional classes for styling purposes. It works for the whole table but not the individual cells.

What I’ve been successful with:

• adding the content
• adding color to the links

What I haven’t been able to do:

• center the text and images in the top two rows, even though these are also within the cell coding.
• add a background color to three of the cells in the top row.
• control the cell width or padding so the text in the bottom row is less crowded and closer to the current Home page appearance. Also there is intended to be whitespace between the three cells with a background color in the top row.
• completely eliminate the borders.

To do this I have tried both three- and five-column models. In the CSS I seem to be able to control the whole table but not individual cells. Using !important hasn’t made a difference. Creating a special class for the three cells in the top row hasn’t improved control. The current experiment with the whitespace image in two out of five columns is less successful than three columns.

The following is what have I for custom CSS. Some of it works, some doesn’t. The purpose of leaving some of it is to show you what is and isn’t working.

#tablepress-1.tablepress-id-1.row-1.column-1,
#tablepress-1.tablepress-id-1.row-1.column-3, 
#tablepress-1.tablepress-id-1.row-1.column-5 {
	
	background-color: #e1fcbe;
}
#tablepress.id-1.row-1.column-2,#tablepress.id-1.row-1.column-4{
	width: 100px;
}
#tablepress-1.headings{
	background-color: #e1fcbe !important;
	text-align: center !important;
}
#tablepress-1 {
	border: none !important;
	padding: 20px;
}
#tablepress-1 a{
	color: #de5401;
}
#tablepress.img {
	text-align: center;
}

I followed the FAQ information and am not getting the results I think I should. I didn’t have any problem with things like image centering before. What am I missing? Or is something not working correctly?

Thank you

The page I need help with: [log in to see the link]