title: Is changing default display property a good practice?
body: <p><strong>TL;DR</strong> Is it a bad practice to change default <code>display</code> property in my CSS?</p>
  
  <h3>Issue</h3>
  
  <p>Recently, in our project we had to position 2 header tags so they would look like one. They had the same font size and similar styling so the only issue was how to place one next to another. We had 2 different ideas on that and it le do a discussion on whether or not is a good practice to change default <code>display</code> property</p>
  
  <p>So, our very basic code</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;h1&gt;Header:&lt;/h1&gt;
      &lt;h2&gt;my header&lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The outcome we would like to have:</p>
  
  <blockquote>
    <p>Header: my header</p>
  </blockquote>
  
  <p>Note:
  The code needs to consists of 2 different headings because on mobile version we want to display them in in separate lines (so leaving default <code>display: block</code>).</p>
  
  <h3>Approach #1: Use <code>display: inline</code></h3>
  
  <p>This is pretty stright forward. Block elements became inline so they are positioned in the same line. The disadvantage of this approach is that default display properties of both <code>h1</code> and <code>h2</code> were changed.</p>
  
  <h3>Approach #2: Use <code>float</code></h3>
  
  <p><code>H1</code> can be positioned on the left using <code>float: left</code> property. This approach leaves the default display property intact, but will requires some hacks if the <code>.container</code> is not long enough to fit both headers in single line.</p>
  
  <h3>The question</h3>
  
  <p>It all leads to a simple question: Is it a bad practice to change the default <code>display</code> property of HTML elements? Is it breaking the standard and should be avoided if possible? Or is it our bread and butter and it does not really matter, as long as code is semantically correct (so headers are placed in <code>h1</code>, articles are placed in <code>article</code> etc...)</p>