Erro misterioso de HTML & CSS na Loja Virtual

[p.a.artegrafica 0]

Olá, todos!
Esbarrei num problema com questões de programação linguagem HTML & CSS e busco por ajuda dos experts aqui.

 

• SINOPSE DA QUESTÃO
Montei no dreamweaver um anúncio de produto em HTML para um cliente, com a finalidade de ser exibido no site institucional da empresa e na loja virtual. 
Simplesmente exibindo nos navegadores, o HTML se comporta direitinho mas, dentro da PLATAFORMA TRAY (da loja virtual) e no site institucional do cliente o anúncio perde boa parte do layout fica quebrado, sem falar que o conteúdo não está se adequando (diminuindo e aumentando) na exibição mobile.

Se tiverem a paciência de ler e me ajudar, ficarei agradecido!
O tópico é extenso, mas sera bem explicado... Prometo!

• MEU BACKGROUND EM PROGRAMAÇÃO HTML / CSS  - Para referência.
Estou aqui no FORUM iMASTERS porque, lááááá nas antigas, fiz um curso de HTML e desenvolvimento web (comprado na época em 4 CDs) do iMSTERS. Cheguei a criar alguns sites mas, como meu foco sempre foi mais na parte gráfica (sou artista gráfico ou, designer, como queiram) acabei abandonando os projetos de web. E isso já foi lá na época das tabelas, iframes e conteúdo em flash. Seja como for, tenho uma certa noção sobre tags, termos e códigos de programação. Reforçando: "alguma" noção!

 

 

• DESENVOLVIMENTO DO TRABALHO
Meu cliente - uma empresa importadora de projetores - solicitou o desenvolvendo de várias peças gráficas (embalagens, manuais, posts para redes sociais) No pacote, me solicitaram também arquivos promocionais em  HTML pra deixar a LOJA VIRTUAL e o SITE INSTITUCIONAL mais atrativos, já que - como todos sabem, imagino -  maioria das lojas virtuais tem um espaço pra fotos e um CAMPO DE TEXTO pra descrição destes produtos. Meu cliente quer que seus anúncios sejam em HTML, bem ilustrados e chamativos como anúncios de revista.

Pois bem... Desenvolvi o layout e a arte foi aprovada.

No momento de criar o arquivo HTML propriamente dito, eu sabia que precisaria me atualizar, afinal, usar "tabelas" está fora dos padrões.

Saí a pesquisar. Li e assisti MUITA COISA (inclusive aqui dentro do Fórum iMasters) sobre DIV / HTML / CSS e, após entender a mecânica básica desses elementos, comecei a montar o HTML, simplesmente fatiando a arte criada (feita em Photoshop). Após alguns tropeços, consegui estruturar o HTML com base só em DIVs e CSS.
Testei no INTERNET EXPLORER e no GOOGLE CHROME e o anúncio (HTML) abriu sem problemas.

 

 

• OS PROBLEMAS

Layout redondinho, fatiado e estruturado em HTML e rodando sem problemas nos navegadores mas. quando o cliente colocou os arquivos (HTML / IMAGENS / ESTILO CSS) no SITE INSTTITUCIONAL e na LOJA VIRTUAL (hospedada pela TRAY E-COMMERCE), o HTML se quebrou... De primeiro, eu havia enviado o HTML, a pasta com imagens e um arquivo CSS em separado, para inserção nos sites. Como houve os problemas, inseri o CSS direto no HTML mas, os problemas persistem...

- No SITE INSTITUCIONAL a estrutura se manteve até certo ponto. Mas, o layout se quebrou em vários pontos e as partes em texto perderam a formatação e as características do texto puxadas via CSS... 
- Na LOJA VIRTUAL: Virou uma bagunça... Primeiro que o HTML só aparece num campo estreito (de uns 200 pixels) no miolo da página, com uma barra de rolagem própria. E as características de texto se perderam todas.

- Em ambos os casos (site e loja) as versões MOBILE ficaram uma bagunça só! Os problemas de visualização se mantem e com o agravante de que o HTML não se ajustou (como eu esperava) ao tamanho da tela do celular.

- Ajuste às resoluções de tela: Quando faço a análise do layout no GOOGLE CHROME (F12) o conteúdo se ajusta à tela...
Este HTML não é pra ser responsivo... Apenas deve AMPLIAR e ENCOLHER de acordo com a resolução de tela do dispositivo do usuário. Pra ficar tipo, uma "responsividade" simulada...

 

 

• DÚVIDAS
1) O que fazer para que o layout se mantenha, mesmo após inserido nos respectivos sites?

2) Qual o procedimento para que o AJUSTE ÁS RESOLUÇÕES DE TELA aconteça?

3) Quais os erros estou cometendo no código?

 

 

• RESSALVAS
Espero que não haja erros muito grotescos no código...
Fui construindo o HTML aos poucos, seguindo alguns tutoriais, uma vez que nunca havia montado nada apenas com base em DIVs

Criei um CSS pra cada linha de DIV porque, achei que deveria ser assim... Se houver uma maneira de simplificar isso, gostaria muito de saber.

Para os próximos HTMLs que estou montando, estou procurando simplificar o design, mantendo os SLICES do mesmo tamanho, assim (imgino) poderei usar uma mesma classe CSS pra diferentes DIVs... Pra facilitar a construção do HTML lá na frente.

 

 

• O CÓDIGO
Segue o link da pasta com as imagens e o HTML:
https://drive.google.com/open?id=1oxhbq48reTrxTE6iLo6J517ebfioXTNE

Aqui vai o código:
 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=content-width, initial-scale=1.0" />
<title>BT835A - Betec Brasil ©</title>
<style>
body {
	font-family:"Tahoma, Verdana, Arial";
	width:1140px;
	margin:auto;
	background-color:#FFF;
}
.titulos-azul { /* FORMATAÇÃO DE TEXTO */
	font-family: Tahoma, Geneva, sans-serif;
	font-size:30pt;
	font-style:normal;
	font-weight:bold;
	font-variant:normal;
	text-align:center;
	letter-spacing:-2px;
	color:#296ba4;
	line-height:25px;
}
.titulos-branco { /* FORMATAÇÃO DE TEXTO */
	font-family:Tahoma, Geneva, sans-serif;
	font-size:30pt;
	font-style:normal;
	font-weight:bold;
	line-height:25px;
	font-variant:normal;
	color: #FFFFFF;
}
.descricoes-titulos { /* FORMATAÇÃO DE TEXTO */
	font-family:Tahoma, Geneva, sans-serif;
	font-size:15pt;
	font-style:normal;
	line-height:22px;
	font-weight:normal;
	font-variant:normal;
	text-transform:none;
	color:#868686;
	text-decoration:none;
}
.descricoes-cinza-claro { /* FORMATAÇÃO DE TEXTO */
	font-family:Tahoma, Geneva, sans-serif;
	font-size:15pt;
	font-style:normal;
	line-height:22px;
	font-weight:normal;
	font-variant:normal;
	text-transform:none;
	color:#dcdcdc;
	text-decoration:none;
}
.subtitulos { /* FORMATAÇÃO DE TEXTO */
	font-family:Tahoma, Geneva, sans-serif;
	font-size:14pt;
	font-style:normal;
	line-height:22px;
	font-weight:bold;
	font-variant:normal;
	text-transform:none;
	color:#868686;
	text-decoration:none;
}
.legenda-quadros-azul { /* FORMATAÇÃO DE TEXTO */
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 15pt;
	font-style: normal;
	line-height: 22px;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #296ba4;
	text-decoration: none;
}
.box-apps{ /* FORMATAÇÃO DIV DOS APLICATIVOS */
	position:relative;
	float:left;
	width:1140px;
	height:290px;
}
#container { /* FORMATAÇÃO DIV PRINCIPAL */
	position:absolute;
	width:100%;
	height:100%;
	background-color:#FFF;
	margin:auto;
}
#imgs-001{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1140px;
	height:344px;
	margin:auto;
}
#imgs-002{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1140px;
	height:226px;
	margin:auto;
}
#imgs-003{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1140px;
	height:385px;
	margin:auto;
}
#imgs-004{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1140px;
	height:423px;
	margin:auto;
}
#imgs-005{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1140px;
	height:416px;	
	margin:auto;
}
#imgs-006{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1140px;
	height:182px;	
	margin:auto;
}
#box-001{ /* TEXTO PROJETOR POTENTE */
	position:relative;
	text-align:center;
	float:left;
	width:1060px;
	height:170px;
	padding-left:40px;
	padding-right:40px;
	padding-top:20px;
	padding-bottom:0px;
	background-color:#FFF;
}
#box-interno{ /* CAIXA GERAL COM TODOS OS APLICATIVOS */
	position:relative;
	width:980px;
	height:290px;
	top:0px;
	left:50%;
	margin-left:-490px;
	background-color:#FFF
}
.app-mini-containers{ /* CAIXAS - IMAGENS DOS APLICATIVOS */
	display:table;
	text-align:center;
	float:left;
	padding:5px;
	margin:5 auto;
	width:235px;
	height:280px;
}
#linha-caracteristicas{ /* BOX COM AS COLUNAS CARACTERÍSTICAS DO PROJETOR */
	position:relative;
	width:1140px;
	height:558px;
	background-color:#FFF;
	float:left;
	margin:auto;
	margin-top:20px;
}
.box-menor-caracteristicas{ /* BOX COM AS COLUNAS CARACTERÍSTICAS DO PROJETOR */
	position:relative;
	width:1075px;
	height:558px;
	top:0px;
	left:0;
	margin-left:-537px;
	margin:auto;
}
.coluna1{ /* COLUNA IMAGENS ESQUERDA */
	position:relative;
	width:229px;
	height:558px;
	background-color:#FFF;
	float:left;
}
.coluna-miolo{ /* COLUNA IMAGEM MIOLO */
	position:relative;
	width:617px;
	height:558px;
	background-color:#FFF;
	alignment-adjust:central;
	float:left;	
}
.coluna2{ /* COLUNA IMAGENS DIREITA */
	position:relative;
	width:229px;
	height:558px;
	background-color:#FFF;
	float:left;
}
#fundo-titulo-cinema{ /* FUNDO DA DIV BASE */
	position:relative;
	width:1140px;
	height:110px;
	float:left;
	background-color:#FFF;
	z-index:1;
}
#barra-azul-escuro{ /* BARRA DE ACABAMENTO AZUL PARA ENCAIXE */
	position:absolute;
	width:1140px;
	height:40px;
	bottom:0px;
	text-align:center;
	background-color:#1c3850;
	z-index:2;
}
#titulo-cinema{ /* FUNDO DO TEXTO */
	position:absolute;
	width:850px;
	height:50px;
	top:50%;
	left:50%;
	margin-left:-425px;
	margin-top:-50px;
	padding-top:20px;
	text-align:center;
	background-color:#296ba4;
	z-index:3;
}
#imgs-cinema1{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1140px;
	height:340px;	
	margin:auto;
}
#imgs-cinema2{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1140px;
	height:403px;	
	margin:auto;
}
#box-max-desempenho{ /* TEXTO MAX DESEMPENHO */
	position:relative;
	text-align:center;
	float:left;
	width:1060px;
	height:130px;
	padding-left:40px;
	padding-right:40px;
	padding-top:20px;
	padding-bottom:0px;
	background-color:#204668;
}
#imgs-keystone{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1140px;
	height:440px;	
	margin:auto;
}
#imgs-portatil-fixo1{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1140px;
	height:447px;	
	margin:auto;
}
#fundo-acesso-facil{ /* FUNDO DA DIV BASE */
	position:relative;
	width:1140px;
	height:110px;
	float:left;
	background-color:#FFF;
	z-index:4;
}
#barra-azul-claro{ /* BARRA DE ACABAMENTO AZUL PARA ENCAIXE */
	position:absolute;
	width:1140px;
	height:40px;
	bottom:0px;
	text-align:center;
	background-color:#d6e4ed;
	z-index:5;
}
#titulo-acesso-facil{ /* FUNDO DO TEXTO */
	position:absolute;
	width:850px;
	height:50px;
	top:50%;
	left:50%;
	margin-left:-425px;
	margin-top:-50px;
	padding-top:20px;
	text-align:center;
	background-color:#296ba4;
	z-index:6;
}
#imgs-acesso-intuitivo1{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1140px;
	height:552px;	
	margin:auto;
}
#box-conectividade{ /* TEXTO AMPLA CONECTIVIDADE */
	position:relative;
	text-align:center;
	float:left;
	width:1060px;
	height:130px;
	padding-left:40px;
	padding-right:40px;
	padding-top:20px;
	padding-bottom:0px;
	background-color:#FFF;
}
#imgs-conectividade1{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1140px;
	height:368px;	
	margin:auto;
}
#imgs-conectividade2{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1140px;
	height:368px;	
	margin:auto;
}
#box-qualidade{ /* TEXTO QUALIDADE E EFICIENCIA */
	position:relative;
	text-align:center;
	float:left;
	width:1060px;
	height:125px;
	padding-left:40px;
	padding-right:40px;
	padding-top:20px;
	padding-bottom:0px;
	background-color:#eff5f8;
}
#imgs-qualidade{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1140px;
	height:320px;
	margin:auto;
	background-color:#eff5f8;
}
#box-lamp-led{ /* TEXTO LAMPADAS LED */
	position:relative;
	text-align:center;
	float:left;
	width:1060px;
	height:130px;
	padding-left:40px;
	padding-right:40px;
	padding-top:20px;
	padding-bottom:0px;
	background-color:#FFF;
}
#imgs-led{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1120px;
	height:250px;
	margin-left:20px;
	background-color:#FFF;
}
#imgs-betec{ /* FORMATAÇÃO LINHA COM IMAGENS */
	position:relative;
	float:left;
	width:1120px;
	height:480px;
	margin-left:20px;
	background-color:#FFF;
</style>
</head>
<body>
	<div id="container"/>
		
		<div id="imgs-001">
    		<img src="images/html-betec-bt835a_01.jpg" width="570" height="344" style="float:left;"/>
			<img src="images/html-betec-bt835a_02.jpg" width="570" height="344" style="float:left;"/></div>
		<div id="imgs-002">
    		<img src="images/html-betec-bt835a_03.jpg" width="570" height="226" style="float:left;"/>
			<img src="images/html-betec-bt835a_04.jpg" width="570" height="226" style="float:left;"/></div>    
		<div id="imgs-003">
   			<img src="images/html-betec-bt835a_05.jpg" width="570" height="385" style="float:left;"/>
			<img src="images/html-betec-bt835a_06.jpg" width="570" height="385" style="float:left;"/></div>
		<div id="imgs-004">
    		<img src="images/html-betec-bt835a_07.jpg" width="570" height="423" style="float:left;"/>
			<img src="images/html-betec-bt835a_08.jpg" width="570" height="423" style="float:left;"/></div>
		<div id="imgs-005">
    		<img src="images/html-betec-bt835a_09.jpg" width="570" height="416" style="float:left;"/>
			<img src="images/html-betec-bt835a_10.jpg" width="570" height="416" style="float:left;"/></div>
		<div id="imgs-006">
    		<img src="images/html-betec-bt835a_11.jpg" width="570" height="182" style="float:left;"/>
			<img src="images/html-betec-bt835a_12.jpg" width="570" height="182" style="float:left;"/></div>
        
		<div id="box-001">
			<p><span class="titulos-azul">PROJETOR POTENTE... SISTEMA SMART!</span></p><p><span class="descricoes-titulos">Com <strong>1600 LÚMENS</strong> para projeção, o que torna o modelo BT835A ainda mais poderoso são as<br /><strong>FUNÇÕES SMART</strong> nativas! O WI-FI integrado permite que você se conecta à internet e tenha<br />acesso direto ao <strong>YOUTUBE, GOOGLE CHROME</strong> e <strong>NETFLIX</strong>, com os aplicativos já instalados!</span></p><p><span class="subtitulos">CONEXÃO WI-FI E OS MELHORES APLICATIVOS JÁ INSTALADOS!</span></p>
		</div><!--fecha box1 -->            
            
		<div class="box-apps">
      		<div id="box-interno">
      			<div class="app-mini-containers"><img src="images/html-betec-bt835a_15.jpg" width="229" height="229"/>							<span class="legenda-quadros-azul">Conexão rápida<br />e fácil</span></div> 
      			<div class="app-mini-containers"><img src="images/html-betec-bt835a_17.jpg" width="229" height="229"/><span class="legenda-quadros-azul">O melhor navegador<br />da internet</span></div> 
      			<div class="app-mini-containers"><img src="images/html-betec-bt835a_19.jpg" width="229" height="229"/><span class="legenda-quadros-azul">Séries e filmes para<br />seu cinema em casa</span></div> 
      			<div class="app-mini-containers"><img src="images/html-betec-bt835a_21.jpg" width="229" height="229"/><span class="legenda-quadros-azul">O maior conteúdo de<br />vídeos do mundo</span>
      		</div><!--fecha box-interno -->
      	</div><!--fecha box-apps -->
        
		<div id="linha-caracteristicas">
        	<div class="box-menor-caracteristicas">
				<div class="coluna1"><img src="images/html-betec-bt835a_28.jpg" width="229" height="250"/><br /><br /><br /><br /><img src="images/html-betec-bt835a_30-04.jpg" width="229" height="250"/></div>
            	<div class="coluna-miolo"><img src="images/html-betec-bt835a_28-02.jpg" width="617" height="558" style="float:left;"/></div>
            	<div class="coluna2"><img src="images/html-betec-bt835a_30.jpg" width="229" height="250"/><br /><br /><br /><br /><img src="images/html-betec-bt835a_33.jpg" width="229" height="250"/></div><br />
			</div><!--Fecha Div Box-Menor-->
        </div><!--Fecha Div Linha-Características-->
        
		<div id="fundo-titulo-cinema">
	        <div id="barra-azul-escuro">
            	<div class="titulos-branco" id="titulo-cinema">CINEMA NO TAMANHO CERTO</div>
            </div><!--Fecha Barra Azul Escuro-->
		</div><!--Fecha Titulo Cinema-->
        
		<div id="imgs-cinema1">
    		<img src="images/html-betec-bt835a_37.jpg" width="570" height="340" style="float:left;"/>
			<img src="images/html-betec-bt835a_38.jpg" width="570" height="340" style="float:left;"/></div>
		<div id="imgs-cinema2">
    		<img src="images/html-betec-bt835a_39.jpg" width="570" height="403" style="float:left;"/>
			<img src="images/html-betec-bt835a_40.jpg" width="570" height="403" style="float:left;"/></div>

		<div id="box-max-desempenho">
			<p><span class="titulos-branco">OBTENHA O MÁXIMO DESEMPENHO</span></p><p><span class="descricoes-cinza-claro"><strong>PARA IMAGENS COM MÁXIMA NITIDEZ, UTILIZE O PROJETOR<br />EM AMBIENTES ESCUROS OU COM BAIXA LUMINOSIDADE!</strong></span></p>
		</div><!--fecha box Max desempenho -->             

		<div id="imgs-keystone">
    		<img src="images/html-betec-bt835a_45.jpg" width="570" height="440" style="float:left;"/>
			<img src="images/html-betec-bt835a_46.jpg" width="570" height="440" style="float:left;"/></div>
		
        <div id="imgs-portatil-fixo1">
    		<img src="images/html-betec-bt835a_45a.jpg" width="570" height="447" style="float:left;"/>
			<img src="images/html-betec-bt835a_46a.jpg" width="570" height="447" style="float:left;"/></div>
            
    	<div id="imgs-portatil-fixo2">
    		<img src="images/html-betec-bt835a_47.jpg" width="570" height="447" style="float:left;"/>
			<img src="images/html-betec-bt835a_48.jpg" width="570" height="447" style="float:left;"/></div>

		<div id="fundo-acesso-facil">
	        <div id="barra-azul-claro">
            	<div class="titulos-branco" id="titulo-acesso-facil">ACESSO FÁCIL E INTUITIVO</div>
            </div><!--Fecha Barra Azul Claro-->
		</div><!--Fecha Acesso Facil-->

		<div id="imgs-acesso-intuitivo1">
    		<img src="images/html-betec-bt835a_53.jpg" width="570" height="552" style="float:left;"/>
			<img src="images/html-betec-bt835a_54.jpg" width="570" height="552" style="float:left;"/>
 		</div><!--Fecha imgs Acesso Intuitivo --> 

		<div id="box-conectividade">
			<p><span class="titulos-azul">AMPLA CONECTIVIDADE</span></p><p><span class="descricoes-titulos">Acesso direto a vários tipos de conexão de entrada, aliando praticidade e tecnologia.<br />Conexão de saída para sistema de som externo de alta fidelidade. Qualidade total para a sua projeção.</span></p>
		</div><!--fecha conectividade -->  

		<div id="imgs-conectividade1">
    		<img src="images/html-betec-bt835a_56.jpg" width="570" height="369" style="float:left;"/>
			<img src="images/html-betec-bt835a_57.jpg" width="570" height="369" style="float:left;"/></div>
		<div id="imgs-conectividade2">
    		<img src="images/html-betec-bt835a_58.jpg" width="570" height="368" style="float:left;"/>
			<img src="images/html-betec-bt835a_59.jpg" width="570" height="368" style="float:left;"/></div>

		<div id="box-qualidade">
			<p><span class="titulos-azul">QUALIDADE E EFICIÊNCIA</span></p><p><span class="descricoes-titulos">Projetado com cuidado e construído com componentes de alta qualidade, o projetor <strong>BT835A</strong><br />é uma combinação elegante da tecnologia de ponta com o ótimo desempenho.</span></p>
		</div><!--fecha conectividade --> 
        
        <div id="imgs-qualidade">
    		<img src="images/html-betec-bt835a_58a.jpg" width="570" height="291" style="float:left;"/>
			<img src="images/html-betec-bt835a_59a.jpg" width="570" height="291" style="float:left;"/></div>

		<div id="box-lamp-led">
			<p><span class="titulos-azul">PROJEÇÃO COM LÂMPADA LED</span></p><p><span class="descricoes-titulos">Lâmpadas LED são muito mais eficientes, duráveis e consomem muito menos energia.<br />Além disso, custam até 5 vezes menos que as lâmpadas de projetores comuns!</span></p>
		</div><!--fecha conectividade --> 
        
        <div id="imgs-led"><img src="images/html-betec-bt835a_68.jpg" width="537" height="211" style="float:left;"/><img src="images/html-betec-bt835a_69.jpg" width="538" height="211" style="float:left;"/></div>

		<div id="imgs-betec">
    		<img src="images/html-betec-bt835a_72.jpg" width="549" height="437" style="float:left;"/>
			<img src="images/html-betec-bt835a_73.jpg" width="548" height="437" style="float:left;"/></div>

</div><!--Fecha Div Container-->

</body>
</html>

 

______________________________

Espero não ter esquecido nada e... 
Se obtiver alguma resposta... Fico agradecido imensamente!

Obrigado a todos, desde já!

 

[xdxddxd 0]

Então, você acabou criando um site com código sem necessidade de repetição.

posso não resolver seus problemas mas irá uma dica até você que vale a pena tentar.

separe o html do css

• crie um: site.html, e um estilo.css. Quando os 2 estão separados a forma de visualização fica mais fácil.
• comece a criar a prática de comentar os códigos, no html seria <!-- Comentário --> e no css seria: /* Comentário */.
• as imagens com width e height iguais podem simplesmente ter uma classe que atribui sua altura e largura sem a necessidade de ter que repetir varias vezes.
• comece a colocar altura e largura em porcentagem(%) isso deixará o site responsivo.
• o html não funciona que nem uma imagem que se auto ajusta com o dispositivo que está sendo usado.
• peça para que quando seu cliente coloque o seu código no site dele para ele referenciar o seu css depois de todos os outros o html sempre vai priorizar o ultimo css a ser referenciado.
• sempre deixe seu código identado.

como eu havia dito, talvez isso não resolva seu problema, mas são boas práticas que você deve criar para facilitar a manipulação e a leitura do seu código.

tente mudar seu width e height para % isso resolverá seu problema com responsividade.

sempre evite ao maximo usar qualquer forma de definir o tamanho de algo que não seja com %.

[p.a.artegrafica 0]

Opa!
Caro XDXD...

Mano... Muito obrigado pela resposta! Mesmo!
Como eu coloquei ali, tenho uma "certa noção" sobre HTML e afins mas, as atualizações da linguagem são muito novidades pra mim e, de certa maneira, eu sabia que alguma (algumas) coisas não estavam (não ficariam) certas no código.

MUITO OBRIGADO - novamente - pelas dicas... Já deu "uma luz".
Guardarei as sugestões com carinho e à saplicarei... DE CERTEZA!

Especificamente sobre as "classes" e o fato delas não precisarem ser repetidas, eu meio que suspeitava mas, na hora de fatiar, como eu não tinha usado tamanhos semelhantes, achei melhor criar uma classe pra cada DIV... Agora já esto cuidando pra fatiar as imagens em tamanhos iguais e o próximo HTML terá apenas 4 classes diferentes pras DIVs.

E agora que você falou sobre as PORCENTAGENS ficou claro pra mim como trabalhar o conteúdo!

Valeu mesmo!
Ate breve e... SUCESSO aí pra você!