Why css is not being applied on the elements with same class?

Because p cannot contain h2.

Check your browser's element inspector. The h2 automatically closes the p element, as a result this is the HTML actually being rendered:

<p class="city"></p>
<h2>Germany</h2>
<p></p>

<p class="city"></p><!-- the closing tag here is automatically added by the browser because the `<h2>` closes a parent `<p>` element -->
<h2>Germany</h2>
<!--the missing opening tag <p> is added by the browser's fault tolerance here --></p>

It's about HTML structure and display:

<h2> should not be inside <p> (You don't need <p> to covert your <h2>)

Display: (style)

<h2> is as a block

<p> is as an inline

HTML structure: (render)

<p><h2>Germany</h2></p>

will be rendered to:

<p class="city"></p>
<h2>Germany</h2>
<p></p>

Trick:

Right click on that element in your browser and Inspect it for see HTML rendered result (very useful for debug)

Read more: How to use an <h2> tag </h2> inside a <p></p> in the middle of a text?