Как исправить ошибку изменения размера в Google Chrome? ⇐ CSS

[Гость]

Я развиваю свое портфолио.
Я замечаю, что при попытке доступа к вкладке technologia.html панель навигации меняет размер, но это происходит только в Google Chrome, я пробовал это в Edge, и все сработало отлично.

Код: Выделить всё

.navbar {
background-color: rgba(235, 235, 235, 0.75) !important;
width: 100% !important;
position: relative !important;
}

.navbar-nav .nav-link {
color: rgba(0, 0, 0, 0.75) !important;
/* Cor do texto com opacidade */
}

.container-fluid {
display: flex;
margin: 0;
width: 100%;
height: 100%;

html,
body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0 !important;
min-height: 100%;
}
.typewriter h1 {
overflow: hidden;
border-right: .15em solid rgb(0, 0, 0);
white-space: nowrap;
letter-spacing: .15em;
animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
color: rgb(255, 255, 255);
vertical-align: center;
font-size: 200px;
}

@media (max-width: 1000px) {
.input-search {
height: 40px;
width: 250px !important;
border-style: none;
padding: 10px;
font-size: 12px;
letter-spacing: 2px;
outline: none;
border-radius: 25px;
transition: all .5s ease-in-out;
background-color: #ffffff;
padding-right: 40px;
color: #000000;
}
}

@media (max-width: 274px) {
.input-search {
height: 40px;
width: 200px !important;
border-style: none;
padding: 10px;
font-size: 12px;
letter-spacing: 2px;
outline: none;
border-radius: 25px;
transition: all .5s ease-in-out;
background-color: #ffffff;
padding-right: 40px;
color: #000000;
}
}

/* Adicionado estilo para telas menores */

@media (max-width: 750px) {
.typewriter h1 {
font-size: 50px;
/* Tamanho menor para telas menores */
}
}

@media (min-width: 750px) and (max-width: 1400px) {
.typewriter h1 {
font-size: 100px;
/* Tamanho menor para telas menores */
}
}

@media (max-width: 300px) {
.typewriter h1 {
font-size: 40px;
/* Tamanho menor para telas menores */
}
}

/* The typing effect */

@keyframes typing {
from {
width: 0
}
to {
width: 100%
}
}

/* The typewriter cursor effect */

@keyframes blink-caret {
from,
to {
border-color: transparent
}
50% {
border-color: rgb(255, 255, 255);
}
}

.search-box {
width: fit-content;
height: fit-content;
position: relative;
}

.input-search {
height: 50px;
width: 50px;
border-style: none;
padding: 10px;
font-size: 18px;
letter-spacing: 2px;
outline: none;
border-radius: 25px;
transition: all .5s ease-in-out;
background-color: #ffffff;
padding-right: 40px;
color: #000000;
}

.input-search::placeholder {
color: rgba(0, 0, 0, 0.5);
font-size: 18px;
letter-spacing: 2px;
font-weight: 100;
}

.btn-search {
width: 50px;
height: 50px;
border-style: none;
font-size: 20px;
font-weight: bold;
outline: none;
cursor: pointer;
border-radius: 50%;
position: absolute;
right: 0px;
color: #000000;
background-color: transparent;
pointer-events: painted;
}

.btn-search:focus~.input-search {
width: 300px;
border-radius: 0px;
background-color: transparent;
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
}

.input-search:focus {
width: 300px;
border-radius: 0px;
background-color: transparent;
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
transition:  all 500ms cubic-bezier(0, 0.110, 0.35, 2);
}

Код: Выделить всё

Document
[*]







[url=#]Vítor Hugo Minhaco Júnior[/url] 

[list]


[url=index.html]Página inicial[/url]

[*]
[url=tecnologia.html]Tecnologias[/url]

[*]
[url=#]Contato[/url]

[/list]


[i][/i] 

Я пробовал много способов исправить это, но после поиска мне сказали что это ошибка Google Chrome.
Ниже я сравню размер панели навигации от одной страницы к другой, при этом код будет одинаковым.

Это правильный размер панели навигации.
[img]https://i.stack. imgur.com/ylUIR.png[/img]


Это неправильный размер панели навигации,


Спасибо всем

Подробнее здесь: https://stackoverflow.com/questions/782 ... gle-chrome