Por que o navegador não está lendo a section como parte do body? | JavaScript

Por que o navegador não está lendo a section como parte do body? HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Conversão de temperaturas</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/conversao.css">
</head>
<body>
    <h1>Conversão de temperaturas</h1>
    <main class="principal">
        <section id="section_celsius_fahrenheit">
            <h3>Conversão Celsius-Fahrenheit</h3>
            <form id="form_celsius_fahrenheit">
                <label>Temperatura em Celsius</label>
                <input type="number" name="celsius_fahrenheit" placeholder="Defina o valor da temperatura em Celsius">
                <button class="botao" id="botao_celsius_fahrenheit">Converter</button>
            </form>
            <div id="resultado_celsius_fahrenheit"></div>
        </section>
        <script type="text/javascript" src="js/conversao_temperatura.js"></script>
</body>
</html>

CSS

body{
    width: 90%;
}

h1{
    font-size: 60px;
}

h2{
    font-size: 40px;
}

h3{
    font-size: 30px;
}

label{
    font-size: 20px;
}

.resultado{
    font-size: 16px;
    font-weight: bold;
}

.passo{
    font-size: 16px;
}

#section_celsius_fahrenheit{
    float: left;
    width: 50%;
    height: 20%;
}

//Conversão Celsius-Fahrenheit
var botaoCelsiusFahrenheit = document.querySelector('#botao_celsius_fahrenheit');
    botaoCelsiusFahrenheit.addEventListener('click', function(event){
        event.preventDefault();

        var form = document.querySelector('#form_celsius_fahrenheit'); 
        var resultado = document.querySelector('#resultado_celsius_fahrenheit');
        var celsius = form.celsius_fahrenheit.value;
        var Fahrenheit = parseFloat((((celsius) / 5) * 9) + 32);

        var fahrenheitp = document.createElement('p');
        var passo1 = document.createElement('p');
        var passo2 = document.createElement('p');
        var passo3 = document.createElement('p');
        var passo4 = document.createElement('p');
        var passo5 = document.createElement('p');

        passo1.classList.add("passo");
        passo2.classList.add("passo");
        passo3.classList.add("passo");
        passo4.classList.add("passo");
        passo5.classList.add("passo");
        fahrenheitp.classList.add('resultado');

        passo1.textContent = celsius + " / 5  =  F-32 / 9";
        passo2.textContent = parseFloat((celsius) / 5).toFixed(2) + " =  F-32 / 9";
        passo3.textContent = parseFloat((celsius) / 5).toFixed(2) + "x9" + " = F-32"; 
        passo4.textContent = parseFloat(((celsius) / 5) * 9).toFixed(2) + " = " + "F-32"
        passo5.textContent = parseFloat(((celsius) / 5) * 9).toFixed(2) + "+32 = F";
        fahrenheitp.textContent = "Resultado: " + celsius + "C° equivale a " + Fahrenheit.toFixed(2) + "F°";

        var corpo = document.querySelectorAll('.corpo');
        var principal = document.querySelectorAll('.principal')
        resultado.appendChild(passo1);
        resultado.appendChild(passo2);
        resultado.appendChild(passo3);
        resultado.appendChild(passo4);
        resultado.appendChild(passo5);
        resultado.appendChild(fahrenheitp);
        resultado.appendChild(principal);
        principal.appendChild(corpo);

    });

Chegou a hora de transformar