ARTICLE AD BOX
My goal is to create a section with a title, a left-aligned logo, and a colored background. The logo and background must also be enclosed in a border. Something like this:
The correct alignment is achieved with this CSS code:
h1 { padding: 10px; font-size: 2.6em; font-weight: normal; color: red; border-top: 2px solid #989898; border-bottom: 2px solid #989898 } .title-wrap { display: flex; justify-content: left; align-items: center; background-color: #EFEEE6; padding: 20px; } .img-wrap { border-top: 2px solid #989898; padding: 10px; border-bottom: 2px solid #989898; padding: 10px; }And the HTML:
<div class="title-wrap"> <img class="img-wrap" src="./xampp_pics/favicon.png" alt="XAMPP Logo"> <h1><strong>XAMPP</strong> Apache + MariaDB + PHP + Perl</h1> </div>What doesn't work is the border above and below the image which, depending on the browser (I tried Chrome, Firefox, and Safari), appears discontinuous. This always happens with Firefox, and at certain zoom levels, such as 175% with Chrome when the title wraps due to the enlarged h1 font size, compared to the title border.
What do I need to reset? Thanks.
PS
Of course, it would have been enough to insert an image, but without "reputations," this isn't allowed.
In any case, the code that solves the problem is the following:
.title-container { display: flex; background-color: #efeee6; } .title-wrap { display: inline-flex; justify-content: start; margin: 12px 20px 12px; padding: 10px; border-block: 2px solid #989898; } .img-wrap { margin-right: 15px; } .title-wrap h1 { margin: 0; font-size: 2.6em; font-weight: normal; }