text in <span> is not inheriting styles from class
<p>I wonder if someone can help me or point me in the right direction so I can resolve my problem.</p>

<p>I have a list which has got class assigned </p>

<pre><code>&lt;ul class="link-list nav"&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu 3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu 4&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>The link-list nav looks as below:</p>

<pre><code>.link-list {
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12px;
}
.link-list &gt; li {
    display: inline-block;
}
.link-list &gt; li &gt; a {
    display: block;
    padding: .9em 1.6em;
    /*margin: top right bottom left;
    border: 1px solid white;*/
    text-decoration: none;
    color: white;
}
.link-list &gt; li &gt; a:hover { /* :hover, :focus, :blur */
    color: pink;
}

.link-list.nav &gt; li &gt; a {
    font-weight: bold;
}
</code></pre>

<p>So now the list is being formatted as it should be</p>

<p>Correct colors:</p>

<p><a href="https://i.stack.imgur.com/CXVF8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CXVF8.png" alt="enter image description here"></a></p>

<p>but when I am trying to make the first item of the list bigger by embedding span tags and changing above code to:</p>

<pre><code>&lt;ul class="link-list nav"&gt;
  &lt;li&gt;&lt;span style="font-size: large"&gt;&lt;a href="#"&gt;Menu 1&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu 3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu 4&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>The font become bigger but also all other formatting disappear</p>

<p>Incorrect colors:</p>

<p><a href="https://i.stack.imgur.com/KXT0C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KXT0C.png" alt="enter image description here"></a></p>

<p>I have been experimenting with defining another class which would inherit from link-list nav but unsuccessfully. Any suggestions please?</p>

<p>Thanks in advance,
Regards Tom.</p>