Как увеличить окно поиска в ReactJs? ⇐ CSS

[Anonymous]

Проблема, с которой я столкнулся до сих пор, заключается в том, что я не могу увеличить окно поиска на панели навигации; Я заметил, что окно поиска не увеличивается в размерах, а логотип на панели навигации становится тоньше.
Найдите код ниже:

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

import React from 'react'
import logo from '../Assets/sampa.png'
import * as Fas from 'react-icons/fa'
/*import * as Delivery from 'react-icons/ci'*/
/*import {useNavigate} from 'react-router-dom'*/
import {useNavigate} from 'react-router-dom'
import '../Home/Home.css'

const Home = () => {
const navigate = useNavigate();
return (




[i]


[/i]




[i][/i]
Cart

[i][/i]
Delivery

 navigate('Signin')}>SignIn




)
}

export default Home

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

.navbar-container{
display: flex;
justify-content: space-between;
background-color: #2c143e;
align-items: center;
width: 100%;
height: 100%;
color: white;
}

.navbar_left {
display: flex;
align-items: center;
}

.navbar_right{
display: flex;
align-items: center;
}

img{
width: 100px;
height: 100px;

}

.searchbox{
width: 200%;
padding-left: 300px;

}

input{
border: 3px solid purple;
height: 40px;
width: 500px;
padding: 20px 20px;
border-radius: 50px;
outline: none;
font-size: 15px;
}

.searchbox i{
position: relative;
left: 12rem;
top: -2.3rem;
color: #2c143e;
cursor:pointer;

}

.cart{
position: relative;
left: -10rem;
}

.cart i{
display: flex;
font-size: 25px;
}

.cart span{
position: relative;
text-align: center;
left: -0.5rem;
}

.delivery{
position: relative;
left: -7rem;
}

.delivery i{
display: flex;
font-size: 20px;
padding-top: 5.5px;
}

.delivery span{
position: relative;
text-align: center;
left: -0.9rem;
padding: -5px;
}

.login{
position: relative;
left: -4rem;
}

/*
.login button{
background-color:#febd69;
width: 100px;
height: 50px;
border-radius: 50px;
/* box-shadow: 0 5px 10px #febd69;
cursor: pointer;
}*/

Мне нужно знать, как увеличить его, не затрагивая размер логотип; пожалуйста, найдите подтверждение проблемы на скриншоте, прикрепленном к этому вопросу.

Спасибо за вашу поддержку.

Подробнее здесь: https://stackoverflow.com/questions/791 ... in-reactjs