Footer Area Widgets

Who wrote this in your custom css?

.widget-area {
width: 300px;
}

😛

That’s why they are lining up vertically. They have no space to being aligned horizontally.
Did you wanted to set the right widget area to that width?
Use

#right.widget-area {
width: 300px;
}

then, but also use media queries to set the width for different viewports