lsaadev lsaadev - 1 month ago 6
CSS Question

CSS Border on the inside of div

Ok, so i have several divs with the same width but one of them has a border that's sticking out of the pattern.

border

is there a way to make it so the border goes inside the div? I've tried

box-sizing: border-box;


Here is what I got so far



#firstDiv {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
max-width: 480;
margin-right: 10;
background: #eeeeee;
border-left: 10px solid #608cc9;
padding-top: 15;
padding-bottom: 15;
text-align: center;
}
#right {float: right}
.divList {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
max-width: 480;
margin-right: 10;
background: #fdead3;
padding-top: 15;
padding-bottom: 15;
text-align: center;
}

<div id="right">
<div id="firstDiv">
<span>NA STANDINGS</span>
</div>
<div class="divList">
<span>1</span>
</div>
</div>




Answer

Following your comment with the actual code, the problem is with the margin on the .rankDisplayer div.

.rankDisplayer {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    background-color: #eeeeee;
    border-color: #eeeeee;
    margin: 10;
}

Remove the margin: 10 you have there and it will be ok.
Another option - change it to margin: 10 0 (this way you keep the top-bottom margin and remove the left-right ones).

Comments