<p>我在这里遇到了一个问题，我试图将一个盒子放在网站的右侧，但不知道为什么它不起作用，我尝试使用<code>justify-content: flex-end;</code>将盒子对齐到页面的“末尾”，然后添加<code>padding-right</code>为<code>200px</code>，但可惜这并不起作用。对于解释方面的任何帮助将不胜感激。</p>
<p><br />></p>
* {
保证金：0；
填充：0；
框大小：边框框；
}
。容器 {
宽度：100%；
高度：50vh；
背景颜色：#1f2937；
位置：静态；
显示：柔性；
弹性方向：列；
调整内容：居中；
}
。页脚 {
位置：绝对；
底部：0px；
宽度：100%；
高度：10vh；
背景颜色：#1f2937；
白颜色;
文本对齐：居中；
显示：柔性；
调整内容：居中；
对齐项目：居中；
}
。标识 {
字体大小：24px；
字体系列：'Times New Roman'、Times、serif；
白颜色;
对齐内容：空间之间；
顶部内边距：15px；
字体系列：'Gill Sans'、'Gill Sans MT'、Calibri、'Trebuchet MS'、sans-serif；
左内边距：200px；
位置：绝对；
顶部：0；
}
.导航栏{
白颜色;
字体大小：18px；
位置：固定；
宽度：85%；
顶部：0；
右：0；
保证金：自动；
显示：柔性；
对齐项目：居中；
调整内容：弹性结束；
弯曲方向：行；
顶部内边距：15px；
右内边距：200px；
}
.navbar ul li {
列表样式：无；
显示：内联块；
边距：0 20px；
文本装饰：无；
}
。文本1 {
位置：相对；
白颜色;
左内边距：200px；
字体大小：48px；
字体粗细：粗体；
宽度：720px；
}
.text2{
白颜色;
字体大小：18px；
左内边距：200px；
宽度：520px；
}
.text3{
文本对齐：居中；
显示：柔性；
对齐项目：居中； /*垂直居中*/
调整内容：正确； /*水平居中*/
宽度：500px；
高度：350px；
背景颜色：灰色；
}
</前>
;
<html lang="zh-cn">
<头>
<元字符集=“UTF-8”>
<元名称=“视口”内容=“宽度=设备宽度，初始比例= 1.0”>
<标题>网站
</头>
<正文>
标题徽标
;
<div class="navbar">
<ul>
<li><a href="index.html">header link one</a></li>
<li><a href="index.html">header link two</a></li>
<li><a href="index.html">header link three</a></li>
</ul>
</div>
<div class="text1">
<h2>This website is awesome</h2>
</div>
<div class="text2">This website has some subtext that goes here under the main title.It's a smaller font and the color is lower contrast</div>
<div class="text3">this is a placeholder for an image</div>
</div>
<div class="footer">
Copyright © The Odin Project 2023
</div>
</body>
</html></pre>
<p><br /></p>
<p>我尝试使用justify-content:flex-end来对齐它，但是我已经束手无策了，说实话，对于我的问题的解释将非常有帮助，我只包含了必要的CSS代码和整个HTML文件。提前感谢大家的帮助！</p>
首先，你使用了flex属性，尽管你还没有设置display:flex;
其次，要使一个div向右移动（例如box）：（根据需要进行缩进）
.container{ display:flex; align-items:center; /*垂直居中*/ justify-content:right; /*水平居中*/ }``` #text{ display:block; }