display:table won't get 100% width, tables using BEM metodology - html

Question

I need to do few tables using display:table, and I trying get into BEM metodology the right way.
.b-table {
dispay: table;
width: 100%;
font-family: arial, sans-serif;
}
.b-table__cell, .b-table__header {
display: table-cell;
text-align: left;
padding: .6em;
}
.b-table__cell {
border: 1px solid #ddd;
}
.b-table__cell--half-wide {
width: 50%;
}
.b-table__cell--quarter-wide {
width: 25%;
}
.b-table__header {
background-color: orangered;
border: 1px solid red;
}
.b-table__row {
display: table-row;
width: 100%;
}
.b-table__row:nth-child(even) {
background-color: #eee;
}
<section class="sect1">
<div class="b-table">
<div class="b-table__row">
<div class="b-table__header b-table__cell--half-wide">Company</div>
<div class="b-table__header b-table__cell--quarter-wide">Contact</div>
<div class="b-table__header b-table__cell--quarter-wide">Country</div>
</div>
<div class="b-table__row">
<div class="b-table__cell">Alfreds Futterkiste</div>
<div class="b-table__cell">Maria Anders</div>
<div class="b-table__cell">Germany</div>
</div>
<div class="b-table__row">
<div class="b-table__cell">Centro comercial Moctezuma</div>
<div class="b-table__cell">Francisco Chang</div>
<div class="b-table__cell">Mexico</div>
</div>
<div class="b-table__row">
<div class="b-table__cell">Ernst Handel</div>
<div class="b-table__cell">Roland Mendel</div>
<div class="b-table__cell">Austria</div>
</div>
<div class="b-table__row">
<div class="b-table__cell">Island Trading</div>
<div class="b-table__cell">Helen Bennett</div>
<div class="b-table__cell">UK</div>
</div>
<div class="b-table__row">
<div class="b-table__cell">Laughing Bacchus Winecellars</div>
<div class="b-table__cell">Yoshi Tannamuri</div>
<div class="b-table__cell">Canada</div>
</div>
<div class="b-table__row">
<div class="b-table__cell">Magazzini Alimentari Riuniti</div>
<div class="b-table__cell">Giovanni Rovelli</div>
<div class="b-table__cell">Italy</div>
</div>
</div>
</section>
<section class="sect2">
<div class="b-table">
<div class="b-table__row">
<div class="b-table__header b-table__cell--half-wide">Company</div>
<div class="b-table__header b-table__cell--half-wide">Contact</div>
</div>
<div class="b-table__row">
<div class="b-table__cell">Alfreds Futterkiste</div>
<div class="b-table__cell">Maria Anders</div>
</div>
<div class="b-table__row">
<div class="b-table__cell">Centro comercial Moctezuma</div>
<div class="b-table__cell">Francisco Chang</div>
</div>
<div class="b-table__row">
<div class="b-table__cell">Ernst Handel</div>
<div class="b-table__cell">Roland Mendel</div>
</div>
<div class="b-table__row">
<div class="b-table__cell">Island Trading</div>
<div class="b-table__cell">Helen Bennett</div>
</div>
<div class="b-table__row">
<div class="b-table__cell">Laughing Bacchus Winecellars</div>
<div class="b-table__cell">Yoshi Tannamuri</div>
</div>
<div class="b-table__row">
<div class="b-table__cell">Magazzini Alimentari Riuniti</div>
<div class="b-table__cell">Giovanni Rovelli</div>
</div>
</div>
</section>
<section class="sect3">
<div class="b-table">
<div class="b-table__row">
<div class="b-table__header b-table__cell--half-wide">Company</div>
<div class="b-table__header b-table__cell--half-wide">Contact</div>
</div>
<div class="b-table__row">
<div class="b-table__cell">Alfreds Futterkiste</div>
<div class="b-table__cell">Maria Anders</div>
</div>
<div class="b-table__row">
<div class="b-table__cell">Centro comercial Moctezuma</div>
<div class="b-table__cell">Francisco Chang</div>
</div>
<div class="b-table__row">
<div class="b-table__cell">Ernst Handel</div>
<div class="b-table__cell">Roland Mendel</div>
</div>
<div class="b-table__row">
<div class="b-table__cell">Island Trading</div>
<div class="b-table__cell">Helen Bennett</div>
</div>
<div class="b-table__row">
<div class="b-table__cell">Laughing Bacchus Winecellars</div>
<div class="b-table__cell">Yoshi Tannamuri</div>
</div>
<div class="b-table__row">
<div class="b-table__cell">Magazzini Alimentari Riuniti</div>
<div class="b-table__cell">Giovanni Rovelli</div>
</div>
</div>
</section>
I can't get tables 100% width of page,
how to properly set margin-top different for every table with BEM,
.sect1 .sect2 .sect3 - are they BEM blocks and should have b- class prefix, maybe for margin-top,
3a. what methods do you use to set many different margins between repeated same elements,
is border and color should be modificators when all elements have the same properties?
P.S. i can't use table - in mobile i need different cell order and some of cell need to be expandable.