Html 导航栏剪切成旋转木马图像

看来我有问题了，我不确定下一步该怎么办。我想我已经用位置、边距、填充等等把我的头撞到了css墙上

我只需要把我的转盘移到导航栏下面，然后把它们都固定好……有什么想法吗

代码：

.carousel-inner.carousel项目{
宽度：100%；
高度：500px；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
hero1先生{
背景：url（hero.jpg）无重复中心固定；
}
hero2先生{
背景：url（hero2.jpg）无重复中心固定；
}
hero3先生{
背景：url（hero3.jpg）无重复中心固定；
}
navbar先生{
字体系列：“Helvetica Neue”，Helvetica；
字号：200；
盒影：0px 1px 3px#2a2a2a；
}
.导航条反向a.导航条品牌{
字体系列：“Helvetica Neue”，Helvetica；
字号：100；
颜色：白色；
}

更新：我想出来了！首先，我完全删除了指向我的图像的CSS。然后，我用rails图像标记助手替换了HTMLIMG类。现在可以了

  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <%= image_tag "hero.jpg", :id =>"hero1",  :class =>"d-block img-fluid" %>
    </div>
    <div class="carousel-item">
      <%= image_tag "hero2.jpg", :id =>"hero2",  :class =>"d-block img-fluid" %>
    </div>
    <div class="carousel-item">
      <%= image_tag "hero3.jpg", :id =>"hero3",  :class =>"d-block img-fluid" %>
    </div>

“hero1”，类别=>“d-块img流体”%>
“hero2”，类别=>“d区块img流体”%>
“hero3”，类别=>“d-块img流体”%>

一个工作示例，说明您当前所拥有的或将帮助他人帮助您的内容。也许您应该在代码中包含导航栏。谢谢。我将更新application.html.erb的完整代码