tugjg tugjg - 1 month ago 18
CSS Question

HTML & CSS Tags within Tags Formatting

I am just starting out with HTML and CSS here, and am stuck.
I have the following HTML Code:



body {
margin: 0;
}

header {
background: #999;
color: white;
padding: 15px 15px 0 15px;
}

header h1 {
margin: 0;
display: inline;
}

nav ul{
margin: 0px;
display: inline;
}

nav ul li{
background: black;
color: white;
display: inline-block;
list-style-type: none;
padding: 5px 15px;
margin: 0;
}

nav ul li a{
color:white;
}

<!doctype html>
<html>
<head>
<title>CSS Layouts</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<header>
<h1>My Page</h1>
<nav>
<ul>
<li><a href="#"></a>Home</li>
<li><a href="#"></a>Blog</li>
<li><a href="#"></a>About</li>
<li><a href="#"></a>Contact</li>
<li><a href="#"></a>Links</li>
</ul>
</nav>
</header>

<div class="row">
<div class="col">col1</div>
<div class="col">col2</div>
<div class="col">col3</div>
</div>
<footer>2016 My Site</footer>
</body>
</html>





My challenge is to make the "My Page" h1 in line, as stated in the CSS

header h1 {
margin:0;
display: inline;
}


In order to get the h1 header "My Page" to go inline with the unordered list, I need to move the h1 in the HTML to underneath of the opening tag (as opposed to where it is now underneath of the header opening tag), but I can't figure out why it will go inline when I do that but it won't when I leave it like it currently is.
It is my understanding that in CSS, if you have the following:

header h1{
some styling here;
}


...that any h1's underneath of header will be affected, however that is not happening in my code currently.

Thank you!

Answer

Your h1 does have the display inline, but the problem is that it is next to nav which is a block level element. Block elements take up as much width as they can, while inline elements only take up as much width as necessary (see w3schools). You'll need to change the display on the nav to inline or inline-block to stop it from taking up so much width.

Comments