My inline-block elements are setting the width of the page, but the header and footer tags are not taking up the full width. Why is this happening and how can I make them span the entire page width?
Here's the HTML code:
<body>
<header>
HEADER
</header>
<ol>
<li><img src="img/slides/boy.jpg"/></li>
<li><img src="img/slides/bridge.jpg"/></li>
<li><img src="img/slides/guitar.jpg"/></li>
<li><img src="img/slides/iphone.jpg"/></li>
</ol>
<footer>
FOOTER
</footer>
</body>
And the CSS code:
* {
border: 0;
margin: 0;
padding: 0;
}
body {
background-color: gray;
}
header {
background-color: yellow;
}
footer {
background-color: yellow;
}
ol {
display: inline-block;
white-space: nowrap;
font-size: 0;
background-color: blue;
}
li {
display: inline-block;
list-style-type: none;
white-space: normal;
}
img {
width: 300px;
height: 300px;
margin: 40px;
}