Widget Area Horizontal _S

First, try putting this in for temporary so that you could see the layout.

#primary, #secondary { outline: 1px solid red; }

See, that area is for widget area on the side. Do you want your site 2 columns as in content and sidebar ? If so, adjust max-width on whatever class that controls #primary and float left for both. Register another widget (the so called footer widget) area, and put in after it, and style the widget containers inside it with proper width.

If in case you only want one 1 column layout, make the #primary and #secondary full width, and style widget container with proper width.

So, I placed the columns as I want them to be and I outlined them as you asked me to. Now I just need the widgets to be horizontal ??

So, now you have this

.widget {
	margin: auto;
	padding-left: 10px;
	padding-right: 20px;
	width: 200px;
}

Try changing it to this, and you should get the idea.

.widget {
	float: left;
	padding: 20px 0;
	width: 33.33%;
	outline: 1px dotted pink; /*remove later*/
}

For more control, there needs to be another outer container for <aside>, so that the side padding can be applied without messing up with the percent in width due to the box model box sizing.

Some info on box model
https://reference.sitepoint.com/css/boxmodel

It worked. Thank you a lot, I can now move on with my project.