CSS标题填充扩展到窗口的右侧_Css

CSS标题填充扩展到窗口的右侧

css

CSS标题填充扩展到窗口的右侧,css,Css,我正在做我的第一个CSS设计，我遇到了一个问题，标题的背景延伸到标题的右边 MWE： HTML: 假想艺术商店假想艺术商店超级酷的标语会出现在这里如果我使用display:inline，它会完全打断标题有没有一种方法可以把它包起来，给它留一个边距，同时给它填充边距？我需要硬编码尺寸吗？这似乎不对编辑：框大小调整设置为边框框或内容框不起任何作用将显示属性设置为内联块标题{ 背景色：#FF0000；填充：20px；显示：内联块； } 假想艺术商店超级酷的标语会在这里出现

我正在做我的第一个CSS设计，我遇到了一个问题，标题的背景延伸到标题的右边

MWE：

HTML:


假想艺术商店
假想艺术商店
超级酷的标语会出现在这里

如果我使用

display:inline，它会完全打断标题
有没有一种方法可以把它包起来，给它留一个边距，同时给它填充边距？我需要硬编码尺寸吗？这似乎不对
编辑：
框大小调整
设置为边框框
或内容框
不起任何作用
将显示属性设置为内联块


标题{
背景色：#FF0000；
填充：20px；
显示：内联块；
}

假想艺术商店
超级酷的标语会在这里出现
这可能会有帮助：请阅读，以及如何创建。我已经包含了html，web开发问题要成为MWE还需要什么？所以您希望红色背景只覆盖标题？是的，现在它正在扩展以填充屏幕（考虑边距）。我需要硬编码吗？
header{
    background-color: #FF0000;
    padding: 20px;
}

<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" href="reset.css"/>
<link rel="stylesheet" href="ArtStoreInitial.css"/>
<link href="https://fonts.googleapis.com/css?family=Six+Caps" 
rel="stylesheet">
<meta charset="utf-8">
<title>Hypothetical Art Store</title>
</head>
<body>
<header>
     <h1>Hypothetical Art Store</h1>
     <h2>Super cool tagline will go here</h2>
</header>