grid isn't set up correctly and image doesn't resize
I setup a contact page using a css grid but the page doesn't look like it's a 2 column grid, the image is on top and the text is on the bottom. The full css is here
Also, my image doesn't resize down for smaller devices.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>The Artworks - Art & Sign Design Studio</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="msvalidate.01" content="A0C1E8EC728A490DC311D88638123B3E" />
<!-- Start css3menu.com HEAD section -->
<link rel="stylesheet" href="nav_menu_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
<!-- End css3menu.com HEAD section -->
</head>
<body>
<div id="container">
<img id="logo" src="images/artworks-banner.jpg" alt="the artworks logo">
<!-- Start css3menu.com BODY section -->
<ul id="css3menu1" class="topmenu">
<input type="checkbox" id="css3menu-switcher" class="switchbox"><label onclick="" class="switch" for="css3menu-switcher"></label> <li class="topfirst"><a href="index.html" title="Home" style="height:20px;line-height:20px;"><img src="nav_menu_files/css3menu1/bhome.png" alt=""/>Home</a></li>
<li class="topmenu"><a href="gallery.html" title="Photo Gallery" style="height:20px;line-height:20px;">Photo Gallery</a></li>
<li class="toplast"><a href="contact.html" title="Contact" style="height:20px;line-height:20px;">Contact</a></li>
</ul><p class="_css3m"><a href="http://css3menu.com/">css menu</a> by Css3Menu.com</p>
<!-- End css3menu.com BODY section -->
<div id="content">
<h1>Contact</h1>
<div class="section group">
<div class="col span_1_of_2">
<img src="images/drew.png" alt="Drew with sign">
</div>
<div class="col span_1_of_2">
<h3>The Artworks</h3>
<p>Andrew Chasse</p>
<p>21 Blish Road</p>
<p>Marlborough, CT 06447</p>
<p><strong>Phone:</strong> (860) 305-4555</p>
<a href="mailto:aachasse@comcast.net">aachasse@comcast.net</a>
</div>
</div>
<br>
<div style="clear:both;"></div>
</div></div>
<div id="footer">Copyright © The Artworks</div>
<script type="text/javascript">var _cmo = {form: '5584c2ade713be000300275d', text: 'Contact', align: 'left', valign: 'middle', lang: 'en', background_color: '#C0C17F'}; (function() {var cms = document.createElement('script'); cms.type = 'text/javascript'; cms.async = true; cms.src = ('https:' == document.location.protocol ? 'https://d1uwd25yvxu96k.cloudfront.net' : 'http://static.contactme.com') + '/widgets/tab/v1/tab.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(cms, s);})();</script>
</body>
</html>
