How Can I Accomplish This ?

Hello,

Can someone help me do this ? i want the first widget to be 100% width and the 2 other widgets below 50%.
The theme (twenty sixteen)only has 2 widget area's.

please see example below
what it is right now :


What i am after


the url where you can see this is :
http://trust.flywheelsites.com/we-feel-even-more-secure-in-our-own-home-with-raa/
I am using twenty sixteen child theme .

 

Oh crap. Throw that thing out and start over. There is no excuse for such bloated code in so simple a layout.

But, if you're not going to listen to good advice...

Find* the css for the first box and delete the float, width and margin-bottom properties. Look further on, the bottom margin is applied (with different values?!?) in three or four other places. That's it. Let the box be its natural self.

Now find the box that holds the other two widgets. Make it {overflow:hidden;}. That causes it to contain its float children.
Now, the two widgets, make both {width: 48%;}. Make one widget {float: left;} and the other {float: right;}. Again, delete the margin-bottom from several places in the styles.

That is one way to fix the layout more to your liking. There are other approaches, some may be better, others worse. Best is to toss that poorly written theme and write a proper page with sane coding practices.

BTW, if you use main, article or section tags (and some others IIRC) the first heading tag in that element must be h1. That isn't done on this page.

cheers,

gary

* By find, I mean to open Firebug in Firefox and select the element of interest. You will be shown all the css that applies to that element.