i want please (ITEC FOR TRADING)the text to spread out to fill that area
some help please ! 
<header class="tc-header">
<div class="tc-container">
<div class="tc-logo">ITEC FOR TRADING</div>
<i class="fa-solid fa-bars nav-toggle"></i>
<nav class="tc-nav" data-visible="false">
<li><a href="./index.html">HOME</a></li>
<li><a href="./offers.html">OFFERS</a></li>
<li><a href="./products.html">PRODUCTS</a></li>
<li><a href="./services.html">SERVICES</a></li>
<li><a href="./Gallery.html">GALLERY</a></li>
<li><a href="./Videos.html">VIDEOS</a></li>
<li><a href="./Support.html">SUPPORT</a></li>
<li><a href="./about.html">ABOUT US</a></li>
<li><a href="./contact.html">CONTACT US</a></li>
</nav>
</div>
</header>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
body{
font-family:" Helvetica Neue",Helvetica,Arial,sans-serif;
}
html{
font-size: 62%;
}
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px white;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgb(0, 0, 0);
}
.tc-header{
width: 100%;
background-color: #11101b;
}
.tc-container{
width: 90%;
margin: auto;
display: flex;
align-items: center;
justify-content: space-around;
overflow: hidden;
}
.tc-logo{
width:24rem;
font-size: 240%;
color: rgb(197, 163, 119);
font-family: Segoe UI Black;
}
.tc-nav{
list-style: none;
display: flex;
padding: 2.2rem;
gap: 1.5rem;
padding-top: 2.6rem;
}
.tc-nav li a{
text-decoration: none;
font-size: 1.91rem;
color: white;
font-weight: 600;
display: inline-block;
width:100%;
position: relative;
font-size: 190%;
}
.tc-nav li a:hover{
color: white;
}
.tc-nav li a::after{
content:"";
width:0%;
height:3px;
background-color: white;
position: absolute;
left:0;
bottom:-5px;
transition: all 0.4s ease;
}
.tc-nav li a:hover::after{
width:100%;
}
.nav-toggle{
display: none;
}
@media(max-width:1024px) {
html{
font-size: 52%;
}
}
@media(max-width:769px) {
.tc-header{
width:100%;
}
html{
font-size: 42%;
}
}
@media(max-width: 560px) {
html{
font-size: 42%;
}
.tc-container{
display: block;
padding:1rem;
}
.tc-nav{
position: fixed;
inset: 0;
background-color: #11101b;
flex-direction: column;
align-items: center;
padding-top: 15vh;
transform: transelateX(100%);
transition: all 0.7s ease;
display: table;
table-layout: fixed
}
.nav-toggle{
font-size: 3rem;
color: white;
z-index:10;
position: absolute;
right:10vw;
top:2rem;
display: inline-block;
}
.tc-logo{
margin-left:2rem ;
z-index: 10;
position: relative;
}
.tc-nav[data-visible="true"]{
transform: translateX(0%);
}
}
</style>
