Html 为什么不是'；当在计算机全屏显示时，我的主元素不在导航栏的右侧吗？

我正在使用代码笔，遇到一个问题，最初我的主要元素正好位于导航栏的右侧（在左侧，高度=100%），但它没有被导航栏重叠，即使我在前面添加了足够宽的空白，以便可以看到主元素。以下是CSS代码：

html，
身体{
最小宽度：290px；
颜色：hsla（214100%，39%，1）；
字体系列：“Germania One”，Helvetica，无衬线；
字号：17px；
线高：1.25；
背景色：hsla（239,60%，40%，0.49）；
}
h1{
颜色：黑色；
}
代码{
背景色：hsla（179,8%，40%，0.49）；
边界半径：3px；
颜色：白色；
显示：块；
文本对齐：左对齐；
空白：预处理；
位置：相对位置；
断字：正常；
换字：正常；
线高：1.5；
填充：10px；
利润率：15px；
}
#导航栏{
z指数：1；
位置：固定；
背景色：hsla（246,81%，24,1）；
最小宽度：290px；
顶部：0px；
左：0px；
宽度：300px；
身高：100%；
右边界：实心；
边框颜色：hsla（264,80%，39%，1）；
}
标题{
颜色：白色；
字体大小：30px；
利润率：10px；
文本对齐：居中；
字号：1.8em；
字号：瘦；
}
#导航栏a{
颜色：白色；
文字装饰：无；
光标：指针；
}
#纳瓦尔{
列表样式：无；
身高：88%；
溢出y：自动；
溢出x：隐藏；
}
#李国宝{
边框：1px实心；
边框底宽：0px；
填充：8px；
左侧填充：45px；
位置：相对位置；
左：-50px；
宽度：100%；
}
#主要文件{
位置：绝对位置；
左边距：310px；
填充：20px；
边缘底部：110px；
}
#主单据头{
文本对齐：左对齐；
边际：0px；
}
第条{
利润率：15px；
字号：0.96em；
}
第二节{
保证金：10px 0px 0px 10px；
}
#巨石img{
宽度：80%；
}
#夏尔巴人{
宽度：90%；
}
@仅介质屏幕和（最大宽度：815px）{
/*移动电话：*/
#纳瓦尔{
边框：1px实心；
高度：207px；
}
代码{
溢出-x：滚动；
}
#导航栏{
位置：绝对位置；
排名：0；
填充：0；
保证金：0；
宽度：100%；
最大高度：275px；
边界：无；
z指数：1；
边框底部：2倍实心；
}
#主要文件{
位置：相对位置；
左边距：0px；
利润上限：270px；
}
#主要文件组{
颜色：黑色；
/*填充顶部：240px*/
}
}
@仅介质屏幕和（最大宽度：400px）{
#导航栏{
字体大小：.75em；
}
#纳瓦尔{
高度：222px；
}
}
#主要文件{
左边距：-10px；
}
代码{
左边距：-20px；
宽度：100%；
填充：15px；
左侧填充：10px；
右边填充：45px；
最小宽度：233px；
}
}

FCC技术文件







解释

导言段



<code>
在此插入示例代码
</code>



看起来我必须在项目中执行其中5个代码元素。为了显示符号“<”，我必须键入



&+l+t


使用上面没有加号的字符。“>”以相同的方式使用以下各项：



&+g+t


我不知道如何在不自动显示为胡萝卜符号的情况下同时显示这些字符。我将询问StackOverFlow（编码网站/论坛）。


我可以做一个文档页面，描述我已经知道的内容，并将用于制作此页面，但我不会为此烦恼：p。


所以我在StackOverFlow上发布了我的问题，如果我得到答案，也许我会在这一部分更新（如果很长的话，很抱歉）。我已经有了使用代码元素在页面中做一些小功能的想法，来解释我是如何制作页面的某些部分的。我也
完全阅读提示（扫了一眼），这似乎是唯一的道路颠簸。谢谢，祝你愉快。

：）

早年生活

早期生活段落

第一个照片标题

故事标题
故事段落

为了在上面的照片中编码，我使用了img元素。编码如下：



<img src=“linkofimagegoesher”alt=“descriptionincasephotofails”id=“goodtohaveidtoalterappearancewithCSS”>


第一步

第一段


后来我搬到了一个空白的小镇上读高中

一些技术文件

因此，您可以在编码元素内部显示如何编码胡萝卜符号的代码，而无需将您键入的内容转换为胡萝卜本身。对不起，如果这没有意义，这是很难描述，除非它是视觉上看到的。这是
您可以输入代码来显示&+l+t和&+g+t，而不会将它们变成胡萝卜（基本上，符号有自己的排序）