na 2 dagen zoeken ik heb gevonden de antwoord.
de border met witte(of andere kleur) background die geedeltelijk in image zijn moet in het zelfde div class zijn van de image.
het kan niet buiten de div class zijn van de image anders het lukt niet.
ook gebruiken van flexbox veroorzakt problemen.
ik heb percentages gebruikt in plaats van flex.
deze is mij html code:
<div class="site-header"> <!-- site-header -->
<div class="site-title ">
X Auto Service</div>
<div class="header-menu">
<ul>
<li><a href="http://webdesignleren.com/" > Home </a> </li>
<li><a href="http://webdesignleren.com/onderhoud/" > Onderhoud </a> </li>
<li><a href="http://webdesignleren.com/banden/" > Banden </a> </li>
<li><a href="http://webdesignleren.com/apk/" > APK </a> </li>
<li><a href="http://webdesignleren.com/contact/" > Contact </a> </li>
</ul> </div>
<message>
<h1> <span>FULL</span> <span>SERVICE</span> <span>OF</span> <span>AUTO</span> <span>REPAIR</span>
<span>And</span> <span>Maintenance</span> <span>PROFESSIONAL</span> <span>HELP</span> <span>AND</span>
<span>DURABLE</span> <span>REPAIR</span> <span>SERVICE</span> <span>place</span> <span>on</span> <span>your</span> <span>own</span> <span>thinking.</span>
</h1>
</message>
<div class="box"> <div class="box-item1"> hello </div>
<div class="box-item2"> hello </div> <div class="box-item3"> hello </div>
</div>
</div>
en deze is mij CSS code:
.box {
display:flex;
width:92%;
float:left;
margin-left:4%;
border:0.1 solid;
box-shadow: 0px 0px 2px 2px #C8C8C8;
box-sizing:inherit;
/*-moz-box-sizing: border-box; */
background-color:red;
height:200px;
margin-top:26rem;
}
.box-item1{
color:black
}
.box-item2{
justify-content:center;
color:black
}
.box-item3{
color:black;
justify-content:flex-end;
}
dank u wel
