Kobo Aura and style

Question

I have created an ebook with a lot of figures, and Calibre viewer shows them correctly. A friend of mine however complained that many figures showed really large on his Kobo Aura One, and he sent me some pics (you may see them here).

I had a quick look at the source: the figure is coded as

<div class="wrap">
    <p class="figura"><img alt="" src="../Images/q078a.png" width="70%"/></p>
  </div>

  <div class="BullProblema">
    <p><a href="../Text/aiutini.xhtml#a078">vuoi un aiutino?</a></p>
    <p><a href="../Text/soluzioni.xhtml#s078">vai alla risposta</a></p>
  </div>
</div> 

and the CSS is

.figura { 
  text-align: center; 
  margin: 1em; 
  padding: 0; 
  display: inline-block; }

.wrap {text-align: center; }

.BullProblema, .BullAiutino, .BullSoluzione { 
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 0px;
  text-align: center; 
  line-height: 1.5em;
  border-style: double;
  border-width: medium;
  border-color: black;
}

It seems to me that the Kobo does not read the CSS: indeed, if I remove the line "display: inline-block;" from the CSS, Calibre reader also shows a large figure.

What did I wrong? My source contains the line

  <link href="../Styles/stile.css" rel="stylesheet" type="text/css"/>

and stile.css is my actual stylesheet.