Brydon Gibson Brydon Gibson - 2 years ago 179
CSS Question

CSS header padding extends to right of window

I'm working on my first CSS design and I'm having an issue where the background for the header extends past the right of the header.

MWE:

header{
background-color: #FF0000;
padding: 20px;
}


HTML:

<!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>


If I use
display: inline;
, it breaks the header completely.

Is there a way to wrap it, give it a margin and give it padding all at the same time? Do I have to hard-code the size? That doesn't seem right.

edit:
box-sizing
set to
border-box
or
content-box
does nothing

Answer Source

Set the display property to inline-block

header {
  background-color: #FF0000;
  padding: 20px;
  display: inline-block;
}
<header>
  <h1>Hypothetical Art Store</h1>
  <h2>Super cool tagline will go here</h2>
</header>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download