Agile web development with Rails 4 interface difficulties - ruby-on-rails

Question

I've been following along with the examples in the book in making a online catalog and am having a couple of discouraging difficulties in Chapter 8 task C: Catalog display.
I have input the code for the stylesheets as instructed but it has created a slightly skewed result as compared to what is shown in the book. Whilst minor and aesthetic in nature its a little shock to my confidence and slightly irritating when trying to carry on through the book.
As you can see the border seems a little confused and the image at the top is covering the header text.
I've been through the code time and time again but can't seem find out where I've gone wrong. Could anybody give me some clues?
Code from application.css.scss (I'm assuming its here)
#banner {
background: #9c9;
padding: 10px;
border-bottom: 2px solid;
font: small-caps 40px/40px "Times New Roman", serif;
color: #282;
text-align: center;
img {
float: left;
}
}
#notice {
color: #000 !important;
border: 2px solid red;
padding: 1em;
margin-bottom: 2em;
background-color: #f0f0f0;
font: bold smaller sans-serif;
}
#columns {
background: #141;
#main {
margin-left: 17em;
padding: 1em;
background: white;
}
#side {
float: left;
padding: 1em 2em;
width: 13em;
background: #141;
ul {
padding: 0;
li {
list-style: none;
a {
colour: #bfb;
font-size: small;
}
}
}
}
The only thing that gives me a hint is in sublime text 2 all beginning with a hash (#banner, #notice etc) are green, but #main is not for some reason?

Answer 1

Same happens to me. I am not sure what to make of this problem as the #banner.img should float left. When examining the compiled application.css, I find the following:
#banner {
background: #9c9;
padding: 10px;
border-bottom: 2px solid;
font: small-caps 40px/40px "Times New Roman", serif;
color: #282;
text-align: center; }
#banner img {
float: left; }
As shown above, we have a "#banner img {" starting block which is properly closed, and the #banner block is correctly closed just before that on the same line as 'text-align: center;'. Even if I eliminate all other css elements after the #banner and #banner img blocks, the problem persists.
With my limited CSS knowledge, the only semblance of correct positioning I could quickly figure out was to remove the text-align: center from the #banner block, and add some padding, or alternatively, set the left-margin of the #banner.img to -400px or something. It's not very elegant nor perfectly functional (resizing screws it all up).