div resizing issue

Hello,

I am fairly new to how css/html coding works. For the life of me I can not seem to get a two simple div’s on my homepage to display correctly both on the desktop version and mobile version of my site https://www.izzysplacealamo.com. The desktop version displays the div’s fine next to each other but the alignment seems very off and I can’t seem to get the to be centered respectively to the left and right. Currently, on the mobile site the content is being pushed off the screen to the right. Below is the css and html that I am using. Please help!

Thanks,
Doug

#apDiv1 {
float: left;
width: 350px;
margin: 40px;
}

<p style=”text-align: center;”>Izzy’s Place is an intimate Italian restaurant and bar bringing the best of Northern California’s seasonal bounty together with simple yet sophisticated cuisine with an emphasis on delectable artisanal Italian food.</p>

<hr align=”center” size=”1″ />

<div id=”apDiv1″ style=”position: left: 13px; top: 11px; width: 350px; height: 283px; z-index: 1; text-align: center; vertical-align: middle;”>

<img alt=”chefjoe_350″ src=”https://izzysplacealamo.com/wp-content/uploads/2013/07/chefjoe_350.png&#8221; width=”100%” height=”242″ />
Chef Joe Panarello

</div>
<div id=”apDiv1″ style=”position: right: 13px; top: 11px; width: 320px; height: 316px; z-index: 1; vertical-align: top;”>
<h1 style=”text-align: center;”></h1>
<h1 style=”text-align: center;”>Izzy’s Place Wine Room</h1>
<p style=”text-align: center;”>The wine room can accommodate up to 45 people for dinner and for private parties.
Please email [email protected] to reserve a date for your holiday party.</p>

<h1 style=”text-align: center;”>Chef’s Table</h1>
<p style=”text-align: center;”>Arrange for an intimate dinner for up to four with Chef Joe at the Chef’s Table in the kitchen. Please email [email protected] make a reservation.</p>

</div>