背景のサイズがどうしてもあわず空白が消えません

現在自分でウェブアプリを作っていて、表示したときに貼り付けた画像のように左端に空白ができてしまいます。

該当するページのcssは以下のようになっています。

.top-main {
  padding: 200px 100px 100px;
  text-align: center;
  position: absolute;
  top: 0;
  width: 100%;
  height: auto;
  min-height: 100%;
  color: black;
  background-color: #3ecdc6;
  background-repeat: no-repeat;
  background-position: center 50%;
  background-size: cover;
  background-image: url("/top.jpg");
}

view

<% if logged_in? %>
  <div class="row">
    <aside class="col-md-4">
      <section class="user_info">
        <%= render 'shared/user_info' %>
      </section>
      <section class="stats">
        <%= render 'shared/stats' %>
      </section>
      <section class="micropost_form">
        <%= render 'shared/micropost_form' %>
      </section>
    </aside>
    <div class="col-md-8">
      <h3>投稿</h3>
      <%= render 'shared/feed' %>
    </div>
  </div>
<% else %>
<div class="top-main">
  <div class="center jumbotron">

    <h1>懐かし掲示板</h1>

    <h2>
      ああ、懐かしや・・・
    </h2>

    <%= link_to "ユーザー登録する", signup_path, class: "btn btn-lg btn-primary" %>
  </div>
  <% end %>

  </div>

カスタムCSS

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

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

/* universal */

body {
  padding-top: 60px;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;
}

.center h1 {
  margin-bottom: 10px;
}

/* 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: #777;
}

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

/* header */

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

#logo:hover {
  color: #fff;
  text-decoration: none;
}

/* footer */

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid #eaeaea;
  color: #777;
}

footer a {
  color: #555;
}

footer a:hover {
  color: #222;
}

footer small {
  float: left;
}

footer ul {
  float: right;
  list-style: none;
}

footer ul li {
  float: left;
  margin-left: 15px;
}

/* 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;
}


.stats {
  overflow: auto;
  margin-top: 0;
  padding: 0;
  a {
    float: left;
    padding: 0 10px;
    border-left: 1px solid $gray-lighter;
    color: gray;
    &:first-child {
      padding-left: 0;
      border: 0;
    }
    &:hover {
      text-decoration: none;
      color: blue;
    }
  }
  strong {
    display: block;
  }
}

.user_avatars {
  overflow: auto;
  margin-top: 10px;
  .gravatar {
    margin: 1px 1px;
  }
  a {
    padding: 0;
  }
}

.users.follow {
  padding: 0;
}

/* 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: red;
  ul {
    color: red;
    margin: 0 0 30px 0;
  }
}

.field_with_errors {
  @extend .has-error;
  .form-control {
    color: $state-danger-text;
  }
}

.checkbox {
  margin-top: -10px;
  margin-bottom: 10px;
  span {
    margin-left: 20px;
    font-weight: normal;
  }
}

#session_remember_me {
  width: auto;
  margin-left: 0;
}

/* Users index */

.users {
  list-style: none;
  margin: 0;
  li {
    overflow: auto;
    padding: 10px 0;
    border-bottom: 1px solid $gray-lighter;
  }
}

/* microposts */

.microposts {
  list-style: none;
  padding: 0;
  li {
    padding: 10px 0;
    border-top: 1px solid #e8e8e8;
  }
  .user {
    margin-top: 5em;
    padding-top: 0;
  }
  .content {
    display: block;
    margin-left: 60px;
    img {
      display: block;
      padding: 5px 0;
    }
  }
  .timestamp {
    color: $gray-light;
    display: block;
    margin-left: 60px;
  }
  .gravatar {
    float: left;
    margin-right: 10px;
    margin-top: 5px;
  }
}

aside {
  textarea {
    height: 100px;
    margin-bottom: 5px;
  }
}

span.picture {
  margin-top: 10px;
  input {
    border: 0;
  }
}


'''情報の修正を行いました

kszk311

2018/02/28 06:24

画像がアップロードされていません。また、最終的に出力されているHTMLのコードを知りたいです。

galaxymaximum

2018/02/28 06:55 編集

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>懐かし掲示板</title> <meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="8c1Lykv2oZuaXw0QCcJSOpJlgKCVj2ZlR/NzBrTQDeIiT2+C+Fiz5xVppGvBkEonjcAA2pzU6NED6sApte0NGQ==" /> <link rel="stylesheet" media="all" href="/assets/account_activations.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/custom.self-c80ed416714c16213ef309d42331e50da5ba431225ad5fe8b46a7b10d6a795a8.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/kumis.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/microposts.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/password_resets.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/posts.self-7d893114dfdf317c2321b10e733efb5e631e8363a66c058e9af6e793ef0529a8.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/relationships.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/sessions.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/static_pages.self-62e75bf55232780ae110a410f3106d1fe5aea3ee917429c99efe78dbc8c6c8e9.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/subjects.self-c31303284ab5a586b3b84747ec42606480e41b61454e3ce1ef6b4b935c66dcea.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/users.self-13f3e151e21b01ed5a75a5f37a6145908f739666fc8bb839bbc76ef69155c886.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/years.self-dcec41ff44aaaf3139b52a5a94fe9af5b89c6cb66fb725ab2181d9272f7fddba.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/application.self-af04b226fd7202dfc532ce7aedb95a0128277937e90d3b3a3d35e1cce9e16886.css?body=1" data-turbolinks-track="reload" /> <script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/bootstrap.self-b38817c3e3a3049abb1fc08dd6ae448b23330f8453226efdb074710209474f75.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/rails-ujs.self-817d9a8cb641f7125060cb18fefada3f35339170767c4e003105f92d4c204e39.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/turbolinks.self-1d1fddf91adc38ac2045c51f0a3e05ca97d07d24d15a4dcbf705009106489e69.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/account_activations.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/action_cable.self-69fddfcddf4fdef9828648f9330d6ce108b93b82b0b8d3affffc59a114853451.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/cable.self-6e0514260c1aa76eaf252412ce74e63f68819fd19bf740595f592c5ba4c36537.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/kumis.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/microposts.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/password_resets.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/posts.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/relationships.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/sessions.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/static_pages.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/subjects.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/users.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/years.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/application.self-7c370d9536d7d0d6a0f7cd7f9826692acd93e4fb05ba46f7b630b879740343d3.js?body=1" data-turbolinks-track="reload"></script>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></head> <body> <header class="navbar navbar-fixed-top navbar-inverse"> <div class="container"> <a id="logo" href="/">懐かし掲示板</a> <nav> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> メニュー <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="/">ホーム</a></li> <li><a href="/about">このサイトについて</a></li> <li><a href="/top">年度を選ぶ</a></li> <li><a href="/help">使い方</a></li> <li><a href="/contact">連絡</a></li> <li><a href="/configuration">利用規約</a></li> <li><a href="/users">ユーザー一覧</a></li> <li><a href="/login">ログイン</a></li> </ul> </ul> </nav> </div> </header> <div class="container"> <div class="top-main"> <div class="center jumbotron"> <h1>懐かし掲示板</h1> <h2> ああ、懐かしや・・・</br> 　 </h2> <a class="btn btn-lg btn-primary" href="/signup">ユーザー登録する</a> </div> </div> <footer class="footer"> <small> 懐かしい人のために。 </small> <nav> <ul> <li><a href="/contact">連絡</a></li> </ul> </nav> </footer> </div> </body> </html>

galaxymaximum

2018/02/28 06:35

情報を追加しました。よろしくお願いいたします。

kszk311

2018/02/28 06:48

head直前の「<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">」の最後の方が特殊記号になっています。まずこちらのエスケープをなおしてもらえますか。

kei344

2018/02/28 06:53

この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問文にコードブロックで追記することをお勧めします。コードブロックは ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

galaxymaximum

2018/02/28 06:56 編集

すみません、特殊記号の部分が直りません。元々は「<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.m　in　　.css">」の空白を消した状態で書いてあります。よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

html
1<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.m　in　　.css">

を

html
1<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
2

にしたら、直りませんかね…。

追記

.top-mainにleft: 0;の指定がないだけかもしれないです。

css
1.top-main {
2	left: 0;
3}

投稿2018/02/28 07:01

編集2018/02/28 08:29

kszk311

総合スコア3404

galaxymaximum

2018/02/28 07:04 編集

すみません、元々はbootstrapで書いていてこのコードがないのですが、どこをどう直せばいいのでしょうか？

galaxymaximum

2018/02/28 07:13 編集

追加ですが元々のコードは<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">と書かれていましたが、私が貼ると文字化けしてしまったという意味で書きました。

kszk311

2018/02/28 07:41

.containerに何かCSSかかってませんか…？

galaxymaximum

2018/02/28 07:49 編集

ヘッダーのviewにcontainerクラスが存在していました <header class="navbar navbar-fixed-top navbar-inverse"> <div class="container"> <%= link_to "懐かし掲示板", root_path, id: "logo" %> <nav> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> メニュー <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><%= link_to "ホーム", root_path %></li> <li><%= link_to "このサイトについて", about_path %></li> <li><%= link_to("年度を選ぶ", "/top") %></li> <li><%= link_to "使い方", help_path %></li> <li><%= link_to "連絡", contact_path %></li> <li><%= link_to("利用規約", "/configuration") %></li> <li><%= link_to "ユーザー一覧", users_path %></li> <% if logged_in? %>・・・このようになっています。しかし、CSSの方にはcontainerには何も書いていません

kszk311

2018/02/28 08:30

ちょっと気になった箇所を追記しました、ご確認ください。

galaxymaximum

2018/02/28 08:36

うまくいきました！！！！！！ありがとうございます！！！！嬉しいです！

kszk311

2018/02/28 08:38

全く違うとこでしたね、でも「font-awesome.m　in　　.css」の箇所も気になるので、直しておいてもらえるとです。

行動規範の内容に同意します