横幅いっぱいの画面表示で、どうしても両脇に隙間が出来てしまう

htmlにて、横幅いっぱいの画像を表示したいのですが、
width:100%;が効かず、*{margin:0 padding:0}のように強制的に全体のデフォルトマージンをリセットしても聞かず、body以下を<div id="wrapper"></div>としてくくって、overflow:hiddenとしても、どうしても画像の両脇の隙間を消すことが出来なかったです
使っているブラウザはchromeです
どの高良い解決方法をご存知でしょうか？

cssです
1// Place all the styles related to the toppages controller here.
2// They will automatically be included in application.css.
3// You can use Sass (SCSS) here: http://sass-lang.com/
4
5body {
6  margin: 0em;
7}
8
9#opa {
10  background: rgba(200,200,200,0.4);
11}
12
13.content {
14  background: rgba(200,200,200,0.4);
15  border-radius: 10px;
16  display: inline-block;
17  width: 100%;
18  height: 155px;
19  text-align: center;
20}
21
22
23#topimage {
24  //overflow:　hidden;
25  //height: 0;
26  width: 100%;
27  padding: 300px; /* calc(画像高さ ÷ 画像横幅 × 100%) */
28  background: url(mt.jpg) center center / cover no-repeat;
29}
30
31html {
32  margin: 0em;
33}
34

htmlです

<body id="top">
  
  <div class="background-hack"></div>
  
  <div id="topimage">
  </div>
  
  <div id="na"></div>
  <div class="blank1"></div>
  <div class="content">
    <h1><font color="white">◯</font></h1>
    <p><font color="white">◯</font></p>
    <p class="push"><%= link_to '◯', explains_path, :style=>"color:white;" %></p>
  </div>
  
  <div id="comp"></div>
  <div class="blank1"></div>
  <div class="content">
    <h1><font color="white">◯</font></h1>
    <p><font color="white"><span>〇〇</span><span>〇〇</span></font></p>
    <p class="push"><%= link_to '◯', companys_path, :style=>"color:white;" %></p>
  </div>
  
  <div id="buy"></div>
  <div class="blank1"></div>
  <div class="content">
    <h1><font color="white">〇〇</font></h1>
    <p><font color="white">ページです</font></p>
    <p class="push"><font color="white">◯ページへ</font></p>
  </div>
  
  <div id="ask"></div>
  <div class="blank1"></div>
  <div class="content">
    <h1><font color="white">〇〇</font></h1>
    <p><font color="white"><span>〇〇</span><span>〇〇</span></font></p>
    <p class="push"><font color="white">〇〇</font></p>
  </div>
  
  <div class="blank3"></div>
</body>

書き方が悪くたびたび修正申し訳ございませんm(__)m

<div id="topimage"> </div> のところで、画像を横幅のみいっぱいに表示させたく、CSSの #topimage { //overflow:　hidden; //height: 0; width: 100%; padding: 300px; /* calc(画像高さ ÷ 画像横幅 × 100%) */ background: url(mt.jpg) center center / cover no-repeat; } のところで検索しながらいろいろ試している状況です！

bodyの内側全てをdivで囲んで、cssでoverflow:hiddenとするやり方、
widthを100%にして、bodyのデフォルトで設定されていると思われる
marginをリセットするやり方、
それを*{margin:0:}のように全選択するやり方等試しましたが、どのような場合でも
必ず左右に隙間が出来てしまいます(´;ω;｀)