The html5 tags nav in the broilerplate.css file - fluid grid

Question

Ok.  I am working with the fluid grid system in DW CS6.
in the broiler plate.css file i see the below code  which seems to control the styling for the listed html 5 elements.
HTML5 display definitions
   ========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
   Base
   ========================================================================== */
why did adobe set the nav id to display as a block element.
this is causing me issues with using the above tags.
My navigation bars name is nav.  I attempted to create another css rule with the display set to INLINE for my menu.
The boiler plate code is overwriting my rule.  Why?  What is the best way to label my divs.  I was tring to go HTML 5 but fluid grid already has some rules in place.  Can i modify that without problems?  what is the best thing to do.  Not label my divs with the HTML5 labels?
why are all html5 tags  set up to display that way.  How are you supposed to have individual control?  without breaking the fluid grids factory helper rules?

Answer 1

Thanks for those charts.  I am building the site for both myself and my visitors.  After looking at your chart I think 90% is good enough for me.  My old website that I am rebuilding used framed pages and front page to build it.   I am making my layout so that IF i find that the fixed nav box is too Dicey I will just pull it off the site.
I am not suse which browser dreamweaver has built in.  I moved into a new windows 8 computer with CS6 at the same time.  I have not downloaded any browsers yet.  I was just building this based on the newest stuff released.  I am far from testing it out and should have gotten some done by now.  AS of right now I have 140 hours in building my new layout and learning CSS coding.  I have not uploaded yet to a URL so I will need to get back to you when I do.  The little bugs keep setting me back to zero.  The layout looked like it all snapped to the grid.  My layout divs were 12 column with 4 divs approx 200 px 400px 300px and 300px everything snapped to and looked fine.  When I started adding my PS images and content to my divs the 4th div fell back down a row in the view.  I then click the arrow to move it down a row which it did then I tried to move it back up.  It would not go.  I have boxes with borders, radius corners, and dropped shadows on the containing box.  I looked at it and starting thinking the CSS styles made it wider than the fluid grid would allow.  So i then removed the styles and it is still stuck a row below where it should be.
Futher down my page I have 4 more rows with 4 divs in each row.  The last 4 all drop down so that it is totaly different than what I a laid out.  It is weird because my div is three colums wide.  I have the last three colums open on the lay out but it will not move up and it seems like the margins are tight or the gutter is wrong.  I am not sure.