Odd DIV behavior with media query - css

Question

On the following page (http://www.ecu.edu/cs-cas/engl/tpc/whytpc.cfm) you can see that, on a mobile device, the columns collapse into a single column. However, the content which appears in the right column is shifted to the right somewhat. The CSS in the media query is:
#media only screen and (max-device-width: 480px) {
#content {
float:left;
max-width:50%;
padding:1em 0 1em 0%;
}
#sidebar {
float:left;
max-width:50%;
padding-top:1em;
}
.spacerMain {
display: block;
padding: none;
color: #2a272e;
width: 100%;
}
.column {
display: block;
width: 100%;
float: left;
clear: both;
}
.spacerCol {
display: block;
width: 100%;
padding: none;
color: #2a272e;
clear: both;
float:left;
}
}
and the HTML:
<div id="container">
<div id="header">
<div id="navigation">
<ul>
<li>Home</li>
<li>Why TPC?</li>
<li>Programs</li>
<li>TPC Social</li>
<li>Questions?</li>
</ul>
</div>
<div id="navigation2">
<ul>
<li><img width="45px" height="45px" alt="Facebook" src="/cs-cas/engl/tpc/customcf/facebook.png" /></li>
<li><img width="45px" height="45px" alt="Twitter" src="/cs-cas/engl/tpc/customcf/twitter.png" /></li>
<li><img height="45px" alt="Linked In" src="/cs-cas/engl/tpc/customcf/linkedin.png" /></li>
<li><img width="45px" height="45px" alt="Purple Bard" src="/cs-cas/engl/tpc/customcf/bardicon.png" /></li>
</ul>
</div>
</div>
<div id="content">
<div id="main">
<div id="spacerMain">
<div class="column">
<div class="spacerColFirst">
<h3 class="sectionTitle">Why TPC at ECU?</h3>
The ECU Department of English offers two innovative online graduate programs in technical and professional communication: the <span style="color: rgb(4, 46, 238); ">Certificate in Professional Communication</span> and the MA concentration in TPC.</div>
<div class="spacerColFirst"><br />
</div>
<div class="spacerColFirst">Every profession needs excellent communicators, and communication itself is becoming an increasingly complex skill set that combines strong writing and editing skills, teamwork, technological sophistication, leadership, adaptability, global awareness, and disciplinary knowledge.<br />
<br />
As part of our master's degree program, you will gain broad proficiency in all these essential areas. In consultation with your faculty advisor and other mentors, you can also focus on one or more areas of emphasis, including </div>
<div class="spacerColFirst">
<ul>
<li><span style="line-height: 1.3em;"><font size="2">technical editing and publishing</font></span></li>
<li><span style="line-height: 1.3em;"><font size="2">emerging media and communication technologies</font></span></li>
<li><span style="line-height: 1.3em;"><font size="2">teaching and training; and </font></span></li>
<li><span style="line-height: 1.3em;"><font size="2">public and civic communication in contexts such as healthcare, science, government, or service organizations.</font></span></li>
</ul>
As a certificate student, you can broaden your communication proficiency by sampling across the range of our courses or develop advanced skills in a specific area of interest.<br />
<br />
As members of a large and dynamic English department, MA students are also encouraged to take advantage of the full range of courses offered in other areas of English, including rhetoric and composition, linguistics and TESL, film, folklore, literature, creative writing, and multicultural and transnational studies.</div>
</div>
</div>
<div class="column">
<div class="spacerCol">
<h3 class="sectionTitle">TPC and your Career Goals</h3>
Our programs offer practicing communication professionals the opportunity to step back from their everyday tasks to reconsider the technological changes and communication principles that shape their work environments.<br />
<br />
Our courses combine cutting-edge theories and contemporary professional practices. Many courses use a project approach, helping students to develop sophisticated workplace communication products while they learn fundamental principles of professional communication in contemporary workplaces.<br />
<br />
Our graduates become public information officers, fund raising and educational outreach professionals, program directors and communication specialists, trainers, content developers, technical editors, and technical communicators in high-tech industries. Others become educators at community colleges or four-year colleges and universities.<br />
<br />
If your career goals include effective communication, our programs can help.</div>
</div>
</div>
</div>
<div id="sidebar">
<dl>
<dt>Program Links</dt>
<dd>MA Degree (TPC Concentration)</dd>
<dd><br />
</dd>
<dd>Graduate Certificate in TPC</dd>
<dd><br />
</dd>
<dd>Course Advising and Registration</dd>
<dd><br />
</dd>
<dd>English Graduate Program</dd>
<dd><br />
</dd>
<dd>English Graduate Catalog</dd>
<dd><br />
</dd>
<dd>English Graduate Curricula<br />
<br />
</dd>
</dl>
<dl>
<dt>Links for Students</dt>
<dd>ECU Department of English<br />
<br />
The Graduate School at ECU<br />
<br />
ECU Academic Calendars<br />
<br />
Blackboard Student Access<br />
<br />
Student E-Mail Access<br />
<br />
Pirate Port<br />
</dd>
</dl>
<dl>
<dt>#ECUTPC</dt>
<dd>
<ul id="twitter_update_list">
<li style="list-style: none">%nbsp</li>
<li class="twitter_date">%nbsp</li>
</ul>
</dd>
</dl>
</div>
<div id="footer"> </div>
</div>

Answer 1

It's not shifted, the sidebar is ocupying just 50% of the width.
But, inside the sidebar, the "dl" elements have a margin left of 1em; that is the space that you see that makes it look like "shifted".
Anyway, if you are going to take of this margin, you should give some margin right to the left column, other wise they will be "touching"

Answer 2

I used a margin-left: -2m; in the CSS to fix the text-column problem. That seems to have cleared it up on mobile browsers.