Table spacing in the bottom

[peterlaz]

I have created a 2 column tabular data using divs and classess to place an image in the left and google map in the right. I have tried adjusting the cell spacing and padding, but there seem to be a gap in the bottom for whatever settings I use. How can I remove the spacing in the bottom?

Thanks

http://www.plan2040.com/contact-us/

[itzsnider]

Play with the CSS below for

.row

border-spacing: 0px;
width: 100%;
color: navy;
/* background-color: pink; */
border: 2px solid darkblue;
padding: 0px;
padding-bottom: -20px; <<---- play with this

[peterlaz]

Thanks for the guidance.
I have tried various values for the margin and padding without being able to remove the bottom spacing.
I am using the parallax pro child theme and wonder what is causing the problem.

Here are codes that I am using.

 
<div class="container">
<div class="row">
    &lt;div class="col vam" style="width:340px"&gt;<img src="http://www.plan2040.com/wp-content/uploads/2014/12/add_340x300.jpg" alt="address" width="340" height="300" />&lt;/div&gt;
    &lt;div class="col"&gt;&lt;iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3320.583649851184!2d-117.79161238445111!3d33.66794844533004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0000000000000000%3A0xd34d139a325c7385!2sWoodbridge+Willows!5e0!3m2!1sen!2smy!4v1446120827015" width="800" height="300" frameborder="0" style="border:0" allowfullscreen&gt;&lt;/iframe&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

@media (min-width: 30em) {
	.row { width: 100%; display: table; table-layout: fixed; }
	.col { display: table-cell; }
}

.container {
	margin-right: -40px;
	margin-left: -40px;
}

.row {
	width: 100%;
    border: 2px solid darkblue;
    color: navy;
    padding: 0px;
    padding-bottom: -20px
}

.vam {
	vertical-align: middle;
}

[peterlaz]

I posted the HTML codes within the shortcode

and wonder why it is appearing with all the special characters.

[Author]

Posts