.container__flex { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; } .beoplay { max-width: 560px; min-height: 520px; background-image: url("../images/Beoplay A1 product.jpg"); background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; background-size: cover; margin-bottom: 40px; padding: 30px 30px; } .beoplay__heading { font-size: 48px; text-align: right; margin-bottom: 10px; } .beoplay__text { font-size: 24px; text-align: right; margin-top: 10px; } .beoplay__button { font-size: 18px; float: right; margin-top: 10px; padding: 13px 38px 7px 38px; } .leica { max-width: 560px; min-height: 520px; background-image: url("../images/Leica MP product.jpg"); background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; background-size: cover; margin-bottom: 40px; padding: 30px 30px; } 
 <div class="container__flex"> <section class="beoplay"> <h1 class="heading beoplay__heading">BEOPLAY A1</h1> <p class="text beoplay__text">The ultra-portable Bluetooth speaker that will travel with you anywhere</p> <a href="" class="button beoplay__button">Buy</a> </section> <section class="leica"> <h1 class="heading leica__heading">Leica MP</h1> <p class="text leica__text">Focused technology for focused photography</p> <a href="" class="button leica__button">Buy</a> </section> </div>

Why does the block width not accept the width specified in the width property?

    1 answer 1

    The CSS property width does not set the total width of the block, but only the width of the content. The total width of the block is then made up of three components: the width of the content, the internal indents and the width of the frames on the left and right.

    If you want the width property to also include indents, you need to set the following property:

     box-sizing: border-box;