CSS(SCSS)のWidth: 100%;が反映されない

前提・実現したいこと

トップページのビューを作成しているのですが、タイトル部分の背景色（緑）の横幅を100%にしているのですが、上下左右に多少の隙間ができてしまいます。
HTMLとCSSの知識があまりなくわからない状況です。

発生している問題・エラーメッセージ

エラーメッセージ

index/html.erb

<div class="title">
  <ul class="top-botton">
    <% if user_signed_in? %>
    <li><%= link_to current_user.name, user_path(current_user.id), class:"user-name", id: "name" %></li>
    <li><%= link_to 'New Article', new_article_path, class:"new-article" %></li>
    <% else %>
    <li><%= link_to 'Log in', new_user_session_path, class: "login" %></li>
    <li><%= link_to 'Sign up', new_user_registration_path, class: "sign-up" %>
    <% end %>
  </ul>
  <div class="box">
    <div class='wave -one'></div>
    <div class='wave -two'></div>
    <div class='wave -three'></div>
    <div class="title-content">B-blog</div>
  </div>
</div>

  <ul class="main">
    <% @articles.each do |article| %>
    <li class="list animation">
      <div class="article-index-name">
        <%= article.user.name %>
      </div>
          <%= link_to article_path(article.id), class:"article-index-name", method: :get do %>
        <div class="article-img-content">
          <%= image_tag article.image, class:"article-img"%>
        </div>
        <div class="article-info">
          <div class="article-index-name">
            <%= article.title%>
          </div>
          <div class="article-index-name">
            <%= article.category.name%>
          </div>
        </div>
        <% end %>
    </li>
   <% end %>
  </ul>

index.scss

.title {
  background-color: #28cc95;
  width: 100%;
  height: 200px;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.title-content {
  left: 38%;
  position: absolute;
  color: white;
  text-align: center;
  font-size: 12vh;
  font-family: serif;
  text-transform: uppercase;
}

試したこと

原因としては、HTMLの組み立て方（親子関係）の問題ではないかと思っています
どなたか教えていただけると幸いです。

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

回答2件

自己解決

リセットCSSを記述する

body {
  font-size: 14px;
  color: #333;
  margin: 0 auto;
}
h1,h2,h3,h4,h5,h6,p {
  padding: 10px 0;
  margin: 0;
}

ul,li {
  padding: 0;
  margin: 0;
}

これで正しくビューが表示されました！

投稿2021/09/07 03:28

YugoTokonami

総合スコア21

CSS
1.title{
2   background-color: #28cc95;
3  width: 100%;
4  height: 200px;
5  border-radius: 5px;
6  position: relative;
7  overflow: hidden;
8  transform: translate3d(0, 0, 0);
9  margin: 0;
10  padding: 0;
11}