Итак, у меня есть эта часть кода, и она отлично работает в Firefox, но в Chrome или Opera макет полностью нарушен, кто-нибудь может определить, что я делаю здесь не так?
<div class="row broadband-block">
<div class="col-12 col-sm-8 offset-sm-2 offset-lg-3 d-flex justify-content-center flex-column broadband-main ">
<div class="row pb-4 d-flex justify-content-center justify-content-sm-start">
<picture>
<source media="(max-width: 576px)"
srcset="/img/broadband-icon@mob.png">
<source media="(max-width: 1200px)"
srcset="/img/broadband-icon@med.png">
<source media="(min-width: 1201px)"
srcset="/img/broadband-icon@1366.png">
<img class="img-fluid" src="~/img/broadband-icon@1366.png" alt="broadband-icon">
</picture>
<h2 class="electricity-header">Broadband</h2>
</div>
<h3 class="electricity-title">We offer tailored Broadband solutions to suit your business needs</h3>
<p class="electricity-text">
We pride ourselves on the quality of our products and award-winning customer service. We understand how important
the internet is to keep your business running smoothly. Benefit from high speed and consistently reliable connectivity
with speeds of up to 24mb. Great value cost-effective business broadband with a range of packages designed to give
you the flexibility to grow.<br /><br />
Whether you are a sole trader, a small to medium business or a large organisation, we have the package to suit you.<br /><br />
Not sure which solution is right for your business? Call one of our advisors
today on <span class="voice-number-color">#######</span>
</p>
<div class="col-12 col-sm-8 d-flex justify-content-center justify-content-sm-start landing-page-buttons">
<button type="button" aria-expanded="false" aria-controls="more-1" class="btn toggle-content voice-buttons">
<span class="text">CONTACT US</span>
</button>
</div>
</div>
</div>
///////// CSS /////////
.broadband-main {
padding-top: 50px;
@include for-phone {
padding-top: 20px;
padding-left: 30px;
}
}