title: Impossible to position horizontal line in HTML/CSS
body: <p>I'm getting a little problem with my <strong>HTML page</strong>. I would like to set my <strong>horizontal line</strong> to the left side. </p>
  
  <p>Up to now, my line is always situated in the center of my page and I don't reach to move this line between my text.</p>
  
  <p>This is my little <strong>HTML script</strong> :</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
      {% load staticfiles %}
  
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;   
      &lt;link rel="stylesheet" type="text/css" href="{% static 'css/Base.css' %}"/&gt;
  
      &lt;style&gt;
  
              body {
                  font-family: Courier New, Courier, monospace;
                  text-align: justify;
                  list-style-type: none;
              }
  
              .header {
                   line-height: 80%;
                   margin:left;
              }
      &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
  
          &lt;div class = "header"&gt;
              &lt;h3&gt; Département &lt;/h3&gt; 
              &lt;p&gt;&lt;/p&gt; 
              (variable)
              &lt;hr align="left" width="10%"&gt; 
              &lt;h3&gt; Commune &lt;/h3&gt; 
              &lt;p&gt;&lt;/p&gt; 
              (variable)
          &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And my <strong>HTML page</strong> looks like :</p>
  
  <p><a href="https://i.stack.imgur.com/7wsb1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7wsb1.png" alt="enter image description here"></a></p>
  
  <p>Do you have an idea ?</p>