html - 将单独的 DIV 宽度对齐到相等的大小

Question

这是我的 site
在首页你可以看到标题图片 DIV class="row"
现在在它下面，是两个 bpx product 和 Az Lily
但是 DIV 宽度与横幅宽度不同。
我试图将所有 DIV 调整为相等的宽度，但只有 TOP DIV 不适合。它比页面 DIV 的其余部分小一点。
我试过将 DIV 的宽度设置为 100%，也尝试将 max-width 设置为 100%
(来自其他帖子)，但没有白费运气。
我附上了它的CSS和HTML。

p.stagingsite {
    font-size: 15px;
    border: solid 2px red;
    font-weight: 700;
    color: red;
    text-align: center;
}

.category-nav ul
{
	display:block;
}


.blockscol
{
    margin: 5px;
    width: 250px;
    height: 254px;
    float: left;
   /* border: solid 1px #eaeaea; */
    padding: 9px 9px 5px 9px;
    margin-left: 21px;
}


/*Background Header */
#header 
{
  background: url(http://azlily.bex.jp/eccube_1/html/template/default/img/background/BG.jpg) ;
}

/*Search By Keyword*/
 .input_search.clearfix 
{
    display: none;
}


/*background contend Mid Section */
#contents
{
	background: url(http://azlily.bex.jp/eccube_1/html/template/default/img/background/BG.jpg) ;
}

/*body template */

#contents_bottom {
	/*border : solid;*/
	/*background: #ffffff;*/
	/*padding-bottom: 80px;*/
	margin-top: -36px;
}

/*top Search bar*/
select#category_id {
    background: none;
}

.row_bottom {
	background: white;
	height: 480px;
	margin-top: 21px;
}

.imgcontroller
{
	float: left;
	margin: 0 33px 0 0;

}

@media only screen and (max-width: 600px) {
	.imgcontroller 
    {
		margin-left: -26px;
		display: inline-grid;
		margin-left: 0 0 5px 0 ;
	}

	}

<div id="contents" class="theme_main_only">

        <div id="contents_top">
                                            </div>

        <div class="container-fluid inner">
                                    
            <div id="main">                        
                <div id="main_middle">
                    <p class="stagingsite">Staging Site_ステージングサイト</p>
    <div class="row">
       <div class="col-sm-12">
            <div class="main_visual">
                <div class="item">
                <a href="http://azlily.bex.jp/eccube_1/html/products/list">  <img src="http://azlily.bex.jp/eccube_1/html/template/default/img/toppageimage/toppageimg.jpg"></a>
                </div>
                            </div>
        </div>
</div>



                </div>

                                                            </div>

Answer 1

删除行和 col-sm-12 div

p.stagingsite {
  font-size: 15px;
  border: solid 2px red;
  font-weight: 700;
  color: red;
  text-align: center;
}

.category-nav ul {
  display: block;
}

.blockscol {
  margin: 5px;
  width: 250px;
  height: 254px;
  float: left;
  /* border: solid 1px #eaeaea; */
  padding: 9px 9px 5px 9px;
  margin-left: 21px;
}


/*Background Header */

#header {
  background: url(http://azlily.bex.jp/eccube_1/html/template/default/img/background/BG.jpg);
}


/*Search By Keyword*/

.input_search.clearfix {
  display: none;
}


/*background contend Mid Section */

#contents {
  background: url(http://azlily.bex.jp/eccube_1/html/template/default/img/background/BG.jpg);
}


/*body template */

#contents_bottom {
  /*border : solid;*/
  /*background: #ffffff;*/
  /*padding-bottom: 80px;*/
  margin-top: -36px;
}


/*top Search bar*/

select#category_id {
  background: none;
}


/*.row {
	background: white;
}*/

.row_bottom {
  background: white;
  height: 480px;
  margin-top: 21px;
}

.imgcontroller {
  float: left;
  margin: 0 33px 0 0;
}

@media only screen and (max-width: 600px) {
  .imgcontroller {
    margin-left: -26px;
    display: inline-grid;
    margin-left: 0 0 5px 0;
  }
}

<div id="contents" class="theme_main_only">

  <div id="contents_top">
  </div>

  <div class="container-fluid inner">

    <div id="main">

      <div id="main_middle">
        <p class="stagingsite">Staging Site_ステージングサイト</p>

        <div class="main_visual">
          <div class="item">
            <a href="http://azlily.bex.jp/eccube_1/html/products/list"> <img src="http://azlily.bex.jp/eccube_1/html/template/default/img/toppageimage/toppageimg.jpg"></a>
          </div>
        </div>



      </div>

    </div>