Html não se ajusta a tela

Front-end
,
#1

Eu estou fazendo um html que vai ser utilizado para gerar pdf como teste eu fiz essa tela para ver como fica e tive a infelicidade do layout ficar bugado… Obs: No editor online o layout do html funcionou normalmente e no projeto ficou assim bugado…

Tela com erro:

Screenshot_256
Screenshot_256.png795×600 10.7 KB

Tela no editor online onde eu fiz o html:

Screenshot_258
Screenshot_258.png1365×697 52.4 KB

====================================================================================

Código HTML

<template>
<div class="col-sm">

    <h1>Dados da CTR</h1>

    <div class="h1">
        <caption>
            <h2>Dados da Transportador</h2>
        </caption>

        <div id="hcard-Ademir-Mazer-Jr" class="vcard">

            <p>
                <strong>Nome/Razão Social: </strong> </p>
            <p>
                <strong>CPF/CNPJ: </strong> </p>
            <p>
                <strong>Telefone: </strong> </p>


        </div>

    </div>



    <div class="secao">
        <caption>
            <h2>Dados do Solicitante</h2>
        </caption>

        <p>
            <strong>Nome / Razão Social : </strong> </p>

        <p>
            <strong>Endereço: </strong> </p>

        <p>
            <strong>Número: </strong> </p>

        <p>
            <strong>Bairro: </strong> </p>

        <p>
            <strong>Cidade: </strong> </p>

        <p>
            <strong>Estado: </strong> </p>

        <p>
            <strong>CPF / CNPJ: </strong> </p>


        <p>
            <strong>Telefone: </strong> </p>





    </div>


    <div class="secao">

        <caption>
            <h2>CLASSE DO MATERIAL PREDOMINANTE</h2>
        </caption>



    </div>

    <div class="secao">

        <caption>
            <h2>DADOS DO DESTINO</h2>
        </caption>

        <p>
            <strong>Nome / Razão Social : </strong> </p>

        <p>
            <strong>Endereço: </strong> </p>

        <p>
            <strong>Número: </strong> </p>

        <p>
            <strong>Bairro: </strong> </p>


        <p>
            <strong>CEP : </strong> </p>

        <p>
            <strong>Telefone: </strong> </p>



        <div class="row justify-content-end">

            <div class="text-center">
                <button class="btn btn-secondary mt-4" @click="voltar()" type="submit">
                    <i class="fas fa-arrow-alt-circle-left mr-2"></i>Voltar</button>
            </div>
        </div>
    </div>


    </div>
   </template>

<style>
h1 {

    text-align: center;

}

h2 {
    background-color: #3b3b3b;
    color: white;
    padding-left: 15px;
    margin: 0 0 0 -15px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    text-align: center;
}
</style>
#2

Tá faltando o “Seção” no css. Só tem o H1 e H2

#3

Sim, secao nao estou utilizando no momento só acho estrando no editor online funciona e vue não