I can't seem to understand why certain span properties (in particular, the width and text-align of "controller-row-number" and "controller-row-name"):
#controller {
width: 250px;
float: left;
font-size: 14px;
line-height: 1.5;
text-align: left;
}
.controller-row {
background-color: blue;
}
.controller-row-number {
background-color: yellow;
width: 60px;
text-align: right;
padding: 0 15px 0 0;
}
.controller-row-name {
background-color: orange;
width: 150px;
text-align: left;
padding: 0 0 0 0;
}
Are being ignored in the following code:
<div id="controller">
<div class="controller-row">
<span class="controller-row-number">1</span>
<span class="controller-row-name">First Name</span>
</div>
<div class="controller-row">
<span class="controller-row-number">2</span>
<span class="controller-row-name">Second Name</span>
</div>
</div>
I have a JSFiddle located here:
Can anyone point me to the correct edits to make, so that the styles are adhered?
Thanks!