How can I fix the spacing/padding issue here? - html

Question

I am forced to use on page css due to a locked down template in Ektron CMS, but I am trying to resolve an issue where my h3.subhead is not aligning to the top on all three columns. In Chrome, col1 and col3 have the extra, unwanted space. In IE, all three columns have the extra space. Not sure how to fix.
* {
padding: 0;
margin: 0;
}
* a {
text-decoration: underline;
}
* a:hover {
text-decoration: none;
}
#sidebar {
width: 20%;
float: right;
padding: 15px 30px 5px 5px;
}
#left {
padding-left: 25px;
float: left;
width: 70%;
}
.clear {
clear: both;
}
#sidebar h2 {
display: block;
padding: 5px;
border-bottom: solid 1px #808184;
text-transform: uppercase;
color: #158C59;
}
#sidebar ul {
list-style: none;
/*margin-bottom:15px;*/
}
#sidebar li {
display: block;
border-bottom: solid 1px #f2eddc;
line-height: 200%;
}
h3.subhead {
font-size: 12px;
text-transform: uppercase;
color: #fff;
display: block;
padding: 5px 0 5px 5px;
background: #158c59;
}
/*.columns {padding:0 8px 0 8px;}*/
.col1 {
width: 30%;
float: left;
}
.col3 {
width: 30%;
float: right;
}
.col2 {
margin: 0 32% 0 32%;
}
.clear2 {
width: 590px;
clear: left;
float: right;
color: #fff!important;
}
.columns div {
background: #f2eddc;
height: 240px;
}
.columns div p {
padding: 5px;
}
.columns h3 {
align: top;
top: 0px;
}
#subnav {
padding: 9px 50px 0 420px;
color: #fff;
}
#subnav a {
color: #fff;
text-decoration: none;
}
img.leftalign,
img.rightalign {
display: block;
padding: 3px;
background: #efefef;
border: solid 1px #ddd;
}
img.leftalign {
float: left;
margin-right: 8px;
}
img.rightalign {
float: right;
margin-left: 8px;
}
h1#sitename {
display: block;
padding: 5px 70px 0 50px;
color: #fff;
}
#sitename a,
#sitename a:visited,
#sitename a:hover {
color: #fff;
text-decoration: none;
}
#left h2 {
color: #158c59!important;
}
blockquote {
background: #efefef;
padding: 5px;
border: solid 1px #ddd;
display: block;
margin: 5px;
}
blockquote.leftalign {
width: 300px;
float: left;
}
.post ul,
.post ol {
margin-bottom: 15px;
}
.post li {
padding: 3px;
}
<div id="wrap">
<div id="content">
<div id="left">
<div class="columns">
<div class="col1">
<h3 class="subhead">Strategic Reinvention Plan</h3>
<p>WHEDA is always working to stay current and look towards how we can best succeed in the future.
Click here to view the presentation by our leadership, presented at the last all staff meeting.</p>
</div>
<div class="col3">
<h3 class="subhead">New Employees</h3>
<p>Welcome to 
Ging Skievaski on our Risk & Compliance team and 
Michael Clark on our Information Technology team!
<br/>
<br/>
<br/>
</p>
</div>
<div class="col2">
<h3 class="subhead">2016 Board Meeting Schedule</h3>
<p>Remember, you can't wear jeans on days that the WHEDA board is meeting. The 2016 meeting schedule is:</p>
<p><strike>February 17</strike>
<br/>April 20
<br/>June 15
<br/>August 17
<br/>October 19
<br/>December 21 </p>
</div>
</div>
<div class="clear2"></div>
<br/>
<div class="post">
<h2>WHEDA Logo Files</h2>
<p>Logo for Use in Partner Publications - <b>All logo use must follow our Brand Standards </b>
<br/>(Right click and select Save As)</p>
<table dropzone="copy" style="text-align: center; width: 100%; border-spacing: 0px; border-collapse: collapse;">
<tbody>
<tr>
<td style="cursor: default;">
<img src="https://www.wheda.com/assets/0/81/90/179/646ddd39-3e15-4bb2-8efb-5c90f4eceb24.jpg" alt="Main Logo JPG" title="Main Logo JPG" class="fancy" width="300px" draggable="true" /> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="sidebar">
<h2>Quick Links</h2>
<ul>
<li>
Employee Suggestion Box
</li>
<li><i>Suggestion Box Tracker</i>
</li>
<li>
Submit a Help Desk Ticket
</li>
<li>
Submit a Marketing Ticket
</li>
<li>
Applications
</li>
</ul>
<h2>Resources</h2>
<ul>
<li>
ADP
</li>
<li>
DocFinity Information
</li>
<li>
Salesforce Login
</li>
<li>
Wisconsin eGov Portal
</li>
<li>
State of Wisconsin Phone/Email Directory
</li>
<li>
WHEDAGear Online Store
</li>
<li>
Loan Committee Schedule
</li>
<li>
Travel Expense Reimbursement
</li>
<li>
Travel Policy
</li>
<li>
Loan Policy
</li>
<li>
Communications & Social Media Policy
</li>
<li>
Whistleblower/Ethics Hotline - FAQs
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>

Answer 1

You could try giving them all margin-top:0px and padding-top:0px just incase something somewhere else is adding margin or padding.
Failing that you could also try popping !important tags on those.
If you inspect your elements by right clicking then choosing "Inspect element" you might be able to find the source of the problem.
It could also be that they just need floating left or right!