如何使用javascript和css通过保持适合屏幕视图来调整视图长度

问：

我想修复我的屏幕，以便我只能在服务器上查看技术.js代码。tecnical.js

我有附件和代码。这是我得到的输出technical.csstechnical.js

这是我的技术.js代码片段。我只需要向观点展示我的技能。但我的其他组件也显示在服务器输出中。谁能帮我调整屏幕长度，这样我就可以查看技能部分了。

import React from 'react';
import './technical.css';

const Technical = () => {
return (
<section id='skill'>
    <div className='header skill-head'>
        <h2>My Skills</h2>
        <p>Here are my skills to represent my Expertise</p>
    </div>
    <div className='skill-main'>
        <div className='skill-bar'>
            <div className='info'>
                <p>HTML</p>
                <p className='percent'>75%</p>
            </div>
            <div className='bar'>
                <span className='html'></span>
            </div>
        </div>
        <div className='skill-bar'>
            <div className='info'>
                <p>CSS</p>
                <p className='percent'>80%</p>
            </div>
            <div className='bar'>
                <span className='css'></span>
            </div>
        </div>
        <div className='skill-bar'>
            <div className='info'>
                <p>JAVASCRIPT</p>
                <p className='percent'>85%</p>
            </div>
            <div className='bar'>
                <span className='javascript'></span>
            </div>
        </div>
        <div className='skill-bar'>
            <div className='info'>
                <p>LARAVEL</p>
                <p className='percent'>85%</p>
            </div>
            <div className='bar'>
                <span className='LARAVEL'></span>
            </div>
        </div>
        <div className='skill-bar'>
            <div className='info'>
                <p>REACT JS</p>
                <p className='percent'>85%</p>
            </div>
            <div className='bar'>
                <span className='reactjs'></span>
            </div>
        </div>
        <div className='skill-bar'>
            <div className='info'>
                <p>MONGODB</p>
                <p className='percent'>80%</p>
            </div>
            <div className='bar'>
                <span className='mongodb'></span>
            </div>
        </div>
        <div className='skill-bar'>
            <div className='info'>
                <p>MYSQL</p>
                <p className='percent'>70%</p>
            </div>
            <div className='bar'>
                <span className='mysql'></span>
            </div>
        </div>
        <div className='skill-bar'>
            <div className='info'>
                <p>PHP</p>
                <p className='percent'>70%</p>
            </div>
            <div className='bar'>
                <span className='php'></span>
            </div>
        </div>
    </div>
</section>
)}export default Technical

这是我的技术.css代码。

                #skill{
            overflow: hidden;
            width: 100vw;
            max-width: 65rem;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            align-items: center;
            justify-content: center;
            align-content: center;
            }

            .header {
            width: 100%;
            margin-bottom: 70px;
            display: grid;
            place-items: center;
            text-align: center;
            }

            .header h2{
            margin-bottom: -5px;
            }

            .skill-main{
            width: 100%;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-column-gap: 50px;
            grid-row-gap: 20px;
            }

            .skill-main .skill-bar .info{
            display: flex;
            justify-content: space-between;
            padding:  0 10px;
            }

            .skill-bar .bar{
            width: 100%;
            height: 10px;
            background-color: rgb(120,115,115);
            border-radius: 25px;
            margin-top: 5px;
            position: relative;
            }

            .skill-bar .bar span{
            width: 50%;
            height: 100%;
            position: absolute;
            overflow: hidden;
            left: 0;
            transition: width 3s ease;
            background-color: yellow;
            border-radius: 25px;
            }

            .skill-bar .info .percent{
            font-weight: bold;
            }

            .skill-bar .bar .html {
            width: 70%;
            animation: html 3s;
            }

            @keyframes html{
            0% {
            width: 0;
            }
            100%{
            width: 70%;
            }
            }

            .skill-bar .bar .css {
            width: 70%;
            animation: css 3s;
            }

            @keyframes css{
            0% {
            width: 0;
            }
            100%{
            width: 70%;
            }
            }

            .skill-bar .bar .javascript {
            width: 85%;
            animation: javascript 3s;
            }

            @keyframes javascript{
            0% {
            width: 0;
            }
            100%{
            width: 85%;
            }
            }

            .skill-bar .bar .laravel {
            width: 70%;
            animation: laravel 3s;
            }

            @keyframes laravel{
            0% {
            width: 0;
            }
            100%{
            width: 70%;
            }
            }

            .skill-bar .bar .reactjs {
            width: 85%;
            animation: reactjs 3s;
            }

            @keyframes reactjs{
            0% {
            width: 0;
            }
            100%{
            width: 85%;
            }
            }

            .skill-bar .bar .mongodb {
            width: 85%;
            animation: html 3s;
            }

            @keyframes mongodb{
            0% {
            width: 0;
            }
            100%{
            width: 85%;
            }
            }

            .skill-bar .bar .mysql {
            width: 70%;
            animation: html 3s;
            }

            @keyframes mysql{
            0% {
            width: 0;
            }
            100%{
            width: 70%;
            }
            }

            .skill-bar .bar .php {
            width: 80%;
            animation: html 3s;
            }

            @keyframes php{
            0% {
            width: 0;
            }
            100%{
            width: 80%;
            }
            }