Html 无法使用继承类在navbar中增加宽度大小

我正在学习CSS3并练习创建导航栏，我想做的是将

输入文本的宽度扩展到导航栏的50%，我尝试应用一个类：

.main-nav__searchbar{
    width: 50%;
    margin: 0;
    padding: 0;
}

但它不起作用


*{
框大小：边框框；
}
身体{
字体系列：“蒙特塞拉特”，无衬线；
边际：0px；
}
#产品概述{
背景色：#ff1b68；
宽度：100%；
高度：528px；
填充：10px；
}
.章节标题{
颜色：#2ddf5c；
}
#产品概述h1{
颜色：白色；
字体系列：“安东”，无衬线；
}
.主标题{
宽度：100%；
背景：#2ddf5c；
填充：8px 16px；
}
.主标题>div{
显示：内联块；
垂直对齐：中间对齐；
}
.main-header__品牌{
颜色：#0e4f1f；
文字装饰：无；
字体大小：粗体；
字体大小：20px；
}
.主导航搜索栏{
宽度：50%；
保证金：0；
填充：0；
}
.主导航{
显示：内联块；
文本对齐：右对齐；
宽度：计算（100%-300px）；
}
.主导航项目{
保证金：0；
填充：0；
列表样式：无；
}
.主导航项目{
显示：内联块；
}

CSS课程








基本上，
显示：内联块
尝试将所有元素放在一行中。因此，您的
50%
似乎非常小。如果将其设置为剩余空间的
100%
，它会大得多

不过，我相信熟悉它也是一个好主意。你可以看到我曾经重新安排过你的导航栏

现在，元素之间的间隔很好。每一个都占用了足够的空间（您仍然可以调整
%
）。此外，您还可以通过以下方式实现出色的即时响应能力


*{
框大小：边框框；
}
身体{
字体系列：“蒙特塞拉特”，无衬线；
边际：0px；
}
#产品概述{
背景色：#ff1b68；
宽度：100%；
高度：528px；
填充：10px；
}
.章节标题{
颜色：#2ddf5c；
}
#产品概述h1{
颜色：白色；
字体系列：“安东”，无衬线；
}
.主标题{
显示器：flex；
对齐项目：居中；
对正内容：空间均匀；
宽度：100%；
背景：#2ddf5c；
填充：8px 16px；
}
.主标题>div{
垂直对齐：中间对齐；
}
.main-header__品牌{
颜色：#0e4f1f；
文字装饰：无；
字体大小：粗体；
字体大小：20px；
}
.主导航搜索栏{
宽度：100%；
保证金：0；
填充：0；
}
.主导航{
宽度：50%；
文本对齐：右对齐；
}
.主导航项目{
显示器：flex；
对正内容：空间均匀；
保证金：0；
填充：0；
列表样式：无；
}
.主导航项目{
}

CSS课程








如果我想增加超过100%的宽度，该怎么办？如果我这样做，它是有效的，也就是说，如果我使用200%，但这不再是响应性的，在这种情况下我们能做什么？这完全取决于你想在一行中有多少元素。它还取决于屏幕大小。没有一个明确的答案适用于所有情况。例如，
width
的值可能需要根据屏幕大小进行更改。为此，您可以使用媒体查询：