As a beginner, I'm facing what seems like a simple problem that I just can't solve. Here is the HTML code I've written:
<div class="discs container">
<ul>
<li><div class="arrowleft"><a href="#" ></a></div></li>
<li><a href="#" ></a></li>
<li><a href="#" ></a></li>
<li><a href="#" ></a></li>
<li><a href="#" ></a></li>
<li><a href="#" ></a></li>
<li><a href="#" ></a></li>
<li><a href="#" ></a></li>
<li><div class="arrowright"><a href="#" ></a></div></li>
</ul>
</div>
I also have the following CSS:
.container {width: 960px; margin: 0 auto;}
.discs {
padding: 16px 0 16px 0;
border-bottom: 1px solid transparent;
outline: 1px solid #333333;
}
/* Remaining CSS properties */
Despite my attempts with using em's for sizes and margins, the layout jumps around when I scale the webpage. How can I make it responsive?
EDIT: You can view a demo of the issue on this JSFiddle link.