I'm trying to accomplish something very simple as seen here.HTML<div id=header>    <div class=container>        <img src=#>        <ul id=header_nav>            <li>Link</li>            <li>Link</li>            <li>Link</li>        </ul>    </div></div>CSS.container {    padding-left: 80px;    padding-right: 80px;}#header {    height: 50px;    line-height: 50px;    background-color: blue;}#header_nav {    float:right;}#header_nav li {    display: inline-block;}Questions:Am I using the IDs and classes correctly?  For example, should header be an ID or class?Is my naming convention ok?Should I be using nested rules instead? E.g #header ul li { ...  }Is this the best way to achieve this layout?Any advice at this stage would be good, so I can take these practices forward when doing the next steps of the structure.
Most basic HTML website - naming and CSS rules
html;css
Am I using the IDs and classes correctly? For example, should header be an ID or class?From your example I don't see anything wrong with them. Just remember that ID's are supposed to be unique within your entire HTML page and classes not. So if you're planning to have more header's (note the exact same name) on your page, make it a class.Is my naming convention ok?Yes, as long as you enforce a consistent naming convention you should be okay.Should I be using nested rules instead? E.g #header ul li { ...  }.This actually depends on your entire HTML structure and personal preference. Most of the time I find #header ul li { ... } being cleaner, because you're applying the CSS rules to the ul li's in the #header without having to define the class or id in the HTML.Is this the best way to achieve this layout?If you have an element that contains only one horizontal line of elements to be centered vertically, more often then not defining height with the same value of line-height becomes redundant.Get rid of your container class and div and move it's CSS rules to the #header block. The #header is the container already.HTML<div id=header>    <img src=#>    <ul>        <li>Link</li>        <li>Link</li>        <li>Link</li>    </ul></div>CSS#header {    line-height: 50px;    padding: 0 80px;    background-color: blue;}#header ul {    float: right;}#header li {    display: inline-block;}Update: Changed #header ul li to #header li, see @cimmanon's comment.JSFiddle