Ruby On Rails - 风格错了

Question

我跟着Ruby On Rails Tutorial by Michael Hartl，我觉得我的风格有问题。

首先，我得到这个代替本

正如你看到的，有未便错题风格和调试框样式

然后，在注册页面我得到这个代替本的

我的风格文件（custom.css.scss）：

@import "bootstrap"; 

/* variables */ 
$paddingTopBody: 60px; 
$marginBottomH1: 10px; 
$grayMediumLight: #eaeaea; 

@mixin box_sizing { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

/* universal */ 

html { 
    overflow-y: scroll; 
} 

body { 
    padding-top: $paddingTopBody; 
} 

section { 
    overflow: auto; 
} 

textarea { 
    resize: vertical; 
} 

.center { 
    text-align: center; 
    h1 { 
    margin-bottom: $marginBottomH1; 
    } 
} 

/* typography */ 

h1, h2, h3, h4, h5, h6 { 
    line-height: 1; 
} 

h1 { 
    font-size: 3em; 
    letter-spacing: -2px; 
    margin-bottom: 30px; 
    text-align: center; 
} 

h2 { 
    font-size: 1.2em; 
    letter-spacing: -1px; 
    margin-bottom: 30px; 
    text-align: center; 
    font-weight: normal; 
    color: $grayLight; 
} 

p { 
    font-size: 1.1em; 
    line-height: 1.7em; 
} 

/* header */ 

#logo { 
    float: left; 
    margin-right: 10px; 
    font-size: 1.7em; 
    color: white; 
    text-transform: uppercase; 
    letter-spacing: -1px; 
    padding-top: 9px; 
    font-weight: bold; 
    line-height: 1; 

    &:hover { 
    color: white; 
    text-decoration: none; 
    } 
} 

/* footer */ 

footer { 
    margin-top: 45px; 
    padding-top: 5px; 
    border-top: 1px solid $grayMediumLight; 
    color: $grayLight; 

    a { 
    color: $gray; 
    &:hover { 
     color: $grayDarker; 
    } 
    } 

    small { 
    float: left; 
    } 

    ul { 
    float: right; 
    list-style: none; 
    li { 
     float: left; 
     margin-left: 10px; 
    } 
    } 

    /* miscellaneous */ 

    .debug_dump { 
    clear: both; 
    float: left; 
    width: 100%; 
    margin-top: 45px; 
    @include box_sizing; 
    } 

    /* sidebar */ 

    aside { 
    section.user_info { 
     margin-top: 20px; 
    } 
    section { 
     padding: 10px 0; 
     margin-top: 20px; 
     &:first-child { 
     border: 0; 
     padding-top: 0; 
     } 
     span { 
     display: block; 
     margin-bottom: 3px; 
     line-height: 1; 
     } 
     h1 { 
     font-size: 1.4em; 
     text-align: left; 
     letter-spacing: -1px; 
     margin-bottom: 3px; 
     margin-top: 0px; 
     } 
    } 
    } 

    .gravatar { 
    float: left; 
    margin-right: 10px; 
    } 

    .gravatar_edit { 
    margin-top: 15px; 
    } 

    /* forms */ 

    input, textarea, select, .uneditable-input { 
    border: 1px solid #bbb; 
    width: 100%; 
    margin-bottom: 15px; 
    @include box_sizing; 
    } 

    input { 
    height: auto !important; 
    } 

    #error_explanation { 
    color: #f00; 
    ul { 
     list-style: none; 
     margin: 0 0 18px 0; 
    } 
    } 

    .field_with_errors { 
    @extend .control-group; 
    @extend .error; 
    } 
} 

任何想法的错误可能是？

Answer 1

最后我找到了错误。我在页脚后忘了}，所以页脚之后的所有内容都在它的标签下。谢谢@Leqna的回答

Answer 2

我不知道迈克尔的书，但你的截图，你可以省略“css reset”

编辑：我发现了来自这本书，you can compare style file directly示例应用程序的github上。