Html CSS网格列不'；t在Chrome和Firefox中浮动，但在IE和Edge中浮动

我正在尝试使用CSS创建一个简单的网格系统，类似于bootstrap。这是我的建议。 CSS代码是：

    /*
* light blue = 00AEEF
* dark blue = 1C75BC
* green = 8DC63F
* dark green = 009444
* orange = F7941E
* dark orange = F15A29
* brown = 594A42
*/


/***************************
****************************
Reset Styles
****************************
***************************/
@import 'normalize.css'

/* Change all elements to use border-box */
html{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*, *:before, *:after{
    box-sizing: inherit;
}

/***************************
****************************
Base Styles
****************************
***************************/
body{
    color: #414042 /* Dark Grey */
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
}

h1, h2, h3{
    font-weight: bold;
}

a{
    color: #8dc63f; /* Green */
    font-weight: bold;
}

a:hover{
    text-decoration: underline;
}

/***************************
****************************
Layout Styles
****************************
***************************/
.container{
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1170px;
}

.row{
    margin-right: -15px;
    margin-left: -15px;
}

/* ":after" is a pseudo-element (NOT a pseudo-class) */
.row::after{
    content: "";
    display: table;
    clear: both;
}

/* This targets all classes that contain the word "col-" */
[class*='col-']{
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

/* Media query excludes extra-small devices and includes small and above */
@media (min-width: 48em) {
    [class*='col-']{
        float: left;

    }

    /* Column One Third */
    .col-1-3{
        width: 33.3333%;
        background: red;
    }

    /* Column Two Thirds */
    .col-2-3{
        width: 66.6666%;
        background: blue;
    }
}




/***************************
****************************
Module Styles
****************************
***************************/


/***************************
****************************
Theme Styles
****************************
***************************/
.background-primary{
    background: #F7941E; /* Orange */
}

.background-secondary{
    background: #00AEEf; /* Blue */
}

.background-tertiary{
    background: #8DC63F; /* Green */
}

  <header class="background-primary">
    <div class="container">
        Header Content
    </div>
  </header>

  <main>
    <section class="background-secondary">
        <div class="container">
            Hero Primary Content
        </div>
    </section>

    <section>
        <div class="container">
            <div class="row">
                <div class="col-1-3">
                    Circle Image
                </div>
                <div class="col-2-3">
                    Content Area
                </div>
            </div> <!-- End row -->
        </div> <!-- End Container -->
    </section>



    <section>
        <div class="container">
            Featured Content
        </div>
    </section>

    <section class="background-primary">
        <div class="container">
            Testimonial Content
        </div>
    </section>

    <section class="background-secondary">
        <div class="container">
            Media Objects
        </div>
    </section>

    <section class="background-tertiary">
        <div class="container">
            More Content
        </div>
    </section>
  </main>

  <footer class="background-primary">
    <div class="container">
        Footer Content
    </div>
  </footer>

HTML代码是：

    /*
* light blue = 00AEEF
* dark blue = 1C75BC
* green = 8DC63F
* dark green = 009444
* orange = F7941E
* dark orange = F15A29
* brown = 594A42
*/


/***************************
****************************
Reset Styles
****************************
***************************/
@import 'normalize.css'

/* Change all elements to use border-box */
html{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*, *:before, *:after{
    box-sizing: inherit;
}

/***************************
****************************
Base Styles
****************************
***************************/
body{
    color: #414042 /* Dark Grey */
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
}

h1, h2, h3{
    font-weight: bold;
}

a{
    color: #8dc63f; /* Green */
    font-weight: bold;
}

a:hover{
    text-decoration: underline;
}

/***************************
****************************
Layout Styles
****************************
***************************/
.container{
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1170px;
}

.row{
    margin-right: -15px;
    margin-left: -15px;
}

/* ":after" is a pseudo-element (NOT a pseudo-class) */
.row::after{
    content: "";
    display: table;
    clear: both;
}

/* This targets all classes that contain the word "col-" */
[class*='col-']{
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

/* Media query excludes extra-small devices and includes small and above */
@media (min-width: 48em) {
    [class*='col-']{
        float: left;

    }

    /* Column One Third */
    .col-1-3{
        width: 33.3333%;
        background: red;
    }

    /* Column Two Thirds */
    .col-2-3{
        width: 66.6666%;
        background: blue;
    }
}




/***************************
****************************
Module Styles
****************************
***************************/


/***************************
****************************
Theme Styles
****************************
***************************/
.background-primary{
    background: #F7941E; /* Orange */
}

.background-secondary{
    background: #00AEEf; /* Blue */
}

.background-tertiary{
    background: #8DC63F; /* Green */
}

  <header class="background-primary">
    <div class="container">
        Header Content
    </div>
  </header>

  <main>
    <section class="background-secondary">
        <div class="container">
            Hero Primary Content
        </div>
    </section>

    <section>
        <div class="container">
            <div class="row">
                <div class="col-1-3">
                    Circle Image
                </div>
                <div class="col-2-3">
                    Content Area
                </div>
            </div> <!-- End row -->
        </div> <!-- End Container -->
    </section>



    <section>
        <div class="container">
            Featured Content
        </div>
    </section>

    <section class="background-primary">
        <div class="container">
            Testimonial Content
        </div>
    </section>

    <section class="background-secondary">
        <div class="container">
            Media Objects
        </div>
    </section>

    <section class="background-tertiary">
        <div class="container">
            More Content
        </div>
    </section>
  </main>

  <footer class="background-primary">
    <div class="container">
        Footer Content
    </div>
  </footer>

标题内容
英雄主要内容
圆形图像
内容区
特色内容
证明内容
媒体对象
更多内容
页脚内容

在IE和Edge中，“圆形图像”和“内容区域”均按预期浮动并水平显示。但在Chrome或Firefox中查看时，它们是垂直堆叠的（至少在我这边）。我怀疑这是因为填充，但为什么IE能够在其他浏览器失败时正确处理它呢？这是一个已知的错误吗

（如果这是一个幼稚的问题，我很抱歉；但我对web开发是新手）

既然你说“类似于引导”，我将假设你没有使用/不愿意使用它（为什么？）

现在，让我们谈谈网格

在网格中，需要指定一些维度才能正常工作。我也会将整个内容包装在一个

中以包含它

如果您这样做，告诉元素要友好，不要超过其父容器的宽度-使用

{max width:100%}

-您会得到一个友好的响应网格。像这样：

（全屏打开代码段，然后调整窗口大小，查看元素如何根据屏幕宽度堆叠/取消堆叠）

/*启动网格CSS*/
.myitem{
显示：内联块；
宽度：300px；
最大高度：260px；
边框底部：1px实心#555；
}
.mycoolcontainer，
.myitem{
边缘：.4em；
}
img，
.mycoolcontainer，
.myitem{
最大宽度：100%；
}
/*结束CSS*/
/*启动视觉系统*/
身体{
背景：131418；
颜色：#999；
文本对齐：居中；
}
.黑暗{
盒影：嵌入0.50px 30px rgba（0,0,0,0.5）；
}
#bg1{
背景：灰色
}
#bg2{
背景：水鸭
}
#bg3{
背景：暗绿色
}
#bg4{
背景：淡天蓝
}
#bg5{
背景：棕色
}
#bg6{
背景：暗绿色
}
#bg7{
背景：布里伍德
}
#bg8{
背景：鲑鱼
}
/*结束可视化*/

标题
标题
标题
标题
标题
标题
标题
标题
标题
标题
标题

请注意，Bootstrap 4现在正式使用Flexbox作为布局网格，而不是float/clearfixes。再见，谢谢。我做这个项目是为了个人研究（学习css），而不是为了创建一个网站。因此，不使用引导的原因。