Why responsive panels are not one beside another by default?

Question

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?

Answer 1

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.

Answer 2

I finally found the solution. AT is printing the following css code :

.five-5x20 > .panel-row {
    clear: none;
}

so, I adjust all the code to be:

#panel-footer .five-5x20 > .panel-row {
    float: left ;
    display: block;
    width: auto;
    clear: none;
}

the clear: none fix the proble, and now the float: left is working.

@Marcel Thanks for all the help