iframe with problems in mobile version and resolution changed

Question

I am developing my first website and am having some problems with a page; specifically the Portfolio page.

To create a catalog menu, I used an iframe with the images and created a menu to direct the Articles, as can be seen an example below.

<section id="catalogo">
            <nav id="menucatalogo">
                <ul>
                    <li><a href="catalogo.html#convitesDig" target="catalogo">Convites Digitais</a></li>
                    <li><a href="catalogo.html#convitesConv" target="catalogo">Convites Convencionais</a></li>
                    <li><a href="catalogo.html#logotipos" target="catalogo">Logotipos</a></li>
                    <li><a href="catalogo.html#video" target="catalogo">Edição de Vídeo</a></li>
                </ul>
            </nav>
            <iframe src="catalogo.html" name="catalogo" id="frame-catalogo"></iframe>
        </section>

The desktop version is perfect, just like the images, just like it is perfect also in Devtools Device Toolbar of Opera and Chrome (I used both browsers as a base), but in the mobile version it was a problem... the iframe is not cut as I left in the CSS command and the texts (mainly the main menu buttons) get distorted (see below)

@charset "UTF-8";
@font-face {
    font-family: 'printclearly';
    src: url("../_fonts/printclearly.otf");
}

section#catalogo {
    width: 900px;
    margin: auto;
}

nav#menucatalogo {
    display: block;
}

nav#menucatalogo ul {
    list-style: none;
    text-transform: uppercase;
    position: relative;
    padding-left: 120px;
}

nav#menucatalogo li {
    display: inline-block;
    background-color: #373737;
    padding: 5px 10px 5px 10px;
    margin: 0 -5px 0 0;
    transition: background-color 0.2s ease;
    font-family: printclearly, sans-serif;
    font-size: 16pt;
    font-weight: bold;
    color: white;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

nav#menucatalogo li:hover {
    background-color: darkgray;
    border-bottom: 2px white solid;
    margin-bottom: -2px;
}

nav#menucatalogo a {
    text-decoration: none;
    color: white;
    display: block;
}

nav#menucatalogo a:hover {
    color: #000000;
}

iframe#frame-catalogo {
    width: 900px;
    height: 500px;
    border: none;
}

Can it be the fault of 000WebHost? Did I do something wrong? Thanks in advance!