3 Footer Widgets with different widths

Trying to achieve something like this at the bottom:
http://socialtriggers.com/perfect-content-width/

Have you used the code at the bottom here:
https://generatepress.com/knowledgebase/choosing-footer-widgets/

Tried this but it messes up the layout

add_filter( 'generate_footer_widget_1_width','generate_custom_footer_1_width' );
function generate_custom_footer_1_width()
{

 	// Return the percentage of this widget width - 25% in this case
 	return '60';

 }

add_filter( 'generate_footer_widget_2_width','generate_custom_footer_2_width' );
function generate_custom_footer_2_width()
{

 	// Return the percentage of this widget width - 25% in this case
 	return '20';

 }

add_filter( 'generate_footer_widget_3_width','generate_custom_footer_3_width' );
function generate_custom_footer_3_width()
{

 	// Return the percentage of this widget width - 25% in this case
 	return '20';

 }

Even when entering 34/33/33 => layout gets messed up vs when this code is not present. The third widget is shoved under widget1/2.

Also tried to define 5 widgets using the above code (even only two widgets are active). But then defining 50/25/25/0/0. This doesn't work either, same issue.

How to do this?