Html 站点'；s的主体和元件粘贴在980px宽度上，赢得'；不要按比例缩小

我试图在Rails应用程序顶部启动前端（仅HTML/CSS）页面，但在320px视口中遇到问题。有些元素不会缩小，我不知道为什么。我已经检查了元素，给出了各种元素的

最大宽度：100%和/或<代码>宽度：100%以及其他固定宽度，但出现了一些问题

index.html

<div class="temple">
    <div class="container" style="height: 100%;"><div class="row" style="height: 100%;">
        <div class="templeHeader">
            Every tourist sees the temples
        </div>
    </div></div> <!-- container and row -->
</div>

如何使
.temple
及其子对象的最大宽度为100%，以便
.templeHeader
在320px视口中正确居中？我觉得我缺少了一些初始设置，这会把事情搞砸。
你应该记得正确缩进你的html，如果你不缩进，它会让人困惑

你已经试过了吗

.temple, .temple * {
    width: 100%; }

我不知道你想用这些代码实现什么，尽管你有解释，你能澄清一下吗？在我看来，您并不需要所有这些。
您需要将这些添加到您的HTML头中：

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

如果您希望“每个游客都能看到寺庙”，而不是在较小的屏幕上出现多行文字，那么请使用以下媒体查询更改特定宽度的字体大小

你能让js摆弄一张图片，让我们更好地了解问题所在吗？除非你有Sass->CSS编译问题，否则只发布编译后的CSS。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

@import "bootstrap-sprockets";
@import "bootstrap";

@mixin center-both {
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
} 

* {
    margin:0; // It is a good idea to set these to zero at the start of
    padding:0; // your css and add them to each element individually as required
}

    .temple {
    /* background-image: image-url("temple.jpg"); */
    position: relative;
    height: 500px;
    background-color: black;
}

    .templeHeader {  //fixed this block where the curly braces were not properly defined 
        font-size: 52px;
        color: white;
        position: relative;
        text-align: center;
        @include center-both;
}

@media screen and (max-width:640px) {

   .templeHeader 

        { font-size:8vw; } //this query will give you a nice responsive header all
                          // the way through various devices

}