Why responsive panels are not one beside another by default? I am using the adaptive theme with panels, mini panels, panels everywhere, and AT Panels Everywhere. My site default template is of at panels everywhere.

I built a 5 column mini panel for the footer. I assigned for each column only one thing: menu, or a logo, or "powered by drupal".

When I am using the builder layout for the mini panel, and build 5 column - every thing works fine, and I have 5 column one beside another, in only one row. (although, I am trying to avoid the builder and use only AT layouts).

But, If I am using the "AT responsive panel - 4,5,6 column" for the mini panel layout, the result is that my footer has two rows: top row is with 2 panels and bottom row is with 3 panels. it  looks like the blocks or something are too big, and the AT layout is just being responsive.

I tried to solve that and make it one row, and add to each panel a class, and made them very narrow. but that didn't work, and I still have 2 rows, even though the panels are very narrow and can feat perfectly in one row (5 columns).

How can I make sure that every panel will use 20% of it's layout (when possible), and all will be presented in one row, 5 columns side by side? 

Here is the problem: 


Here is the footer code:

The footer is still in two rows, and looks like that:


What causing the AT mini panel to think it has no room, and need to change the layout?
This can be done CSS only:

Apply a width and float to all panels in the footer:

#footer .region {
  float:left;
  width:20%;
}


Or make them a little smaller so you can apply margins to 'm.