Pre Tag in HTML

So I am just learning to HTML , as I wanted to become a web developer. I used the <pre> tag for the proper alignment in my code. But the alignment seems to come little fuzzy.

But the output of 3 and 4 i.e Reason to live and Happiness are not properly align with respect to the above quotes.

<p>For me you are:</p>
<pre>
                    1.Love
                    2.Life
                    3.Reason to Live
                    4.Happiness
            </pre>

Solution

I've tested your code and it seems to line up fine, you could always put the content in a list like the below:

<ol>
 <li>Love</li>
 <li>Life</li>
 <li>Reason to Live</li>
 <li>Happiness</li>
</ol>

If this isn't what you need, please could you show us how it appears for you?