body { font-family: 'Montserrat', sans-serif; } header{ background: #BBBBBB; padding: 20px 0px;

} .caixa{ position: relative; width: 940px; margin: 0 auto; } nav{ position: absolute; top: 110px; right: 0px;

}

nav li{ display: inline; margin: 0 0 0 15px;

} nav a{ text-transform: uppercase; color: black; font-weight: bold; font-size: 22px; text-decoration: none; } nav a:hover{ color: red; text-decoration: underline; } .produtos { width: 940px; margin: 0px auto; padding:50px 0px;

} .produtos li{ display: inline-block; text-align: center; width: 30%; vertical-align: top; margin: 1.5PX; padding: 30PX 20PX; box-sizing: border-box; border: 2px solid black; border-radius: 10px;

} .produtos li:hover{ border-color:red;

} .produtos li:active{ border-color:green; }

.produtos li:hover h2{ font-size: 34px; } .produtos h2{ font-size: 30px; font-weight: bold; } .produto_descrição{ font-size: 18px;

} .produto_preço{ font-size: 22px; font-weight: bold; margin-top: 10px; }

footer{ text-align: center; background:url("bg.jpg"); padding: 40px 0px; } .copyright{ color: white; font-size: 13px; margin-top: 20px; } main{ width: 940px; margin: 0 auto; text-transform: uppercase; color: black; }

form{ margin: 40px 0px; } form label, form legend{ display: block; font-size: 20px; margin: 0 0 10px; } .horário{ margin-bottom: 10px; } .input-padrão{ display: block; margin: 0 0 10px; padding: 10px 25px; width: 50%; } form p{ font-size: 20px; margin-bottom: 10px; } .checkbox{ margin: 10px 0; display: inline; margin-bottom: 10px; } .enviar{ margin-top: 10px; width: 40%; padding:15px 0px; background: grey; font-size: 15px; font-weight: bold; color: white; border: solid 2px black; border-radius: 5px; transition: 1s all; cursor: pointer; } .enviar:hover{ background: darkgreen; transform: scale(1.2); } table{ margin: 20px 40px; } thead{ background: #555555; color: white; font-weight: bold; }

td,th{ border: solid 1px black; padding: 15px 10px; } /* css da página inicial */ .banner{ width: 100%; } .titulo-principal{ text-align: center; font-size: 2em; margin: 0 0 1em; clear:left; } .principal p{ margin: 0 0 1em; } .principal strong{ font-weight: bold; } .principal em{ font-style: italic; } .utensilios{ float:left; width: 130px; margin: 0 20px 20px 0; } .imagembeneficios{ width: 60%; } .mapa{ padding: 3em 0; } .mapa p{ margin: 0 0 2em; text-align: center; } .beneficios { padding: 3em 0; }

.conteudo-beneficios{ width: 640px; margin: 0 auto; }

.lista-beneficios{ width: 40%; display: inline-block; vertical-align: top; } .itens{ line-height: 1.5; }

.imagembeneficios{ width: 60%; }

.video{ width: 560px; margin:2em auto; }

Boa tarde! Gabriel, você pode colocar a imagem em uma outra <div></div>e aplicar o css nela, sua lista de benefícios precisa de mais espaço interno.

Colocar a imagem em uma outra Lista ou uma outra

Eu poderia tbm colocar a lista ocupando 70% do espaço e a imagem 30%, seria uma solução também?

Bom dia! Gabriel faz o teste, vai tentando aplicar as soluções que você acredita que vá resolver, diminuindo as letras ou a imagem, e tenta outra DIV também

Entendi, obrigado, a questão do espaçamento resolveu, até mesmo diminuir a a fonte resolveu, agora eu criei outra div, coloquei a imagem a direita, eu só não estou conseguindo colocar as div uma do lado da outra, igual na aula.

Beneficios

css

.beneficios {

padding: 3em 0; background: #888888;

}

.conteudo-beneficios{ width: 640px; margin: 0 auto; }

.lista-beneficios{ width: 40%; display: inline-block; vertical-align: top; } .itens{ line-height: 1.5; font-size: 15px; } .itens:first-child { font-weight: bold; }

.imagembeneficios{ width: 60%; } .img-beneficio{ float: right; vertical-align: top; display: inline-block; width: 50%;

} .video{ width: 560px; margin:2em auto; }

<section class="beneficios">
  <h3 class="titulo-principal">Beneficios</h3>
  <div class="conteudo-beneficios">
    <ul class="lista-beneficios">
      <li class="itens">Atendimento ao clientes</li>
      <li class="itens">Localização</li>
      <li class="itens">Profissionais Qualificados</li>
      <li class="itens">Espaço Diferenciado</li>
      <li class="itens">Pontualidade</li>
      <li class="itens">Limpeza</li>
    </ul>
    <div><img src="beneficios.jpg" class="imagembeneficios" ></div>
  </div>

Agora deu certo, muito Obrigado me salvou kkkk

Valeu Gabi! Uma dica meio gambiarra: Qualquer problema com CSS coloca mais uma <div></div> Bons estudos!