<body>
<img src="logo.jpg">
<nav>
<ul>
<li><a href="contato.hmtl">contato</a></li>
<li><a href="serviço.hmtl">serviço</a></li>
<li><a href="sobremim.hmtl">sobre mim</a></li>
</ul>
</body>
no CSS:
nav{ width:250px;
background-color:#CCC;
display:inline-block;
}
img{ display:inline-block;
width:250px;
height:200px;
}
Nesse caso seus elementos precisam de uma classe para conte-los, pois assim os dois são ''filhos'' do mesmo elemento e assim podem ficarem lado a lado na mesma ''caixa'' .
<html>
<head>
<style>
nav,img {float:left;}
aside{
background-color:#CCC;
display:inline-block;
}
aside ul{
float:left; width:50px;
}
img{
display:inline-block;
width:250px;
height:200px;
}</style>
</head>
<body>
<aside>
<img src="foto.jpg">
<nav>
<ul>
<li><a href="contato.hmtl">contato</a></li>
<li><a href="serviço.hmtl">serviço</a></li>
<li><a href="sobremim.hmtl">sobre mim</a></li>
</ul>
</nav>
</aside>
</body>
</html>Deu certo, porém não aprendemos ainda essa propriedade float, fiquei curiosa pq queria ver isso funcionar apenas com a propriedade display: inline-block. Que era o que o exercício em questão ensinada. Detalhe, pelo que constatei o que fez os elementos ficarem em cima e alinhados foi a propriedade float ne? pq tirei o display: inline-block da regra img no CSS e continuou funcionando... enfim a dúvida continua... kkk