html - How to move title of header for it to line up with main content of the page? -
i have row columns on main content section , gave width of 1000px , centered margin:0 auto. title of header way left of course , want line right row begin. how can achieve this?
<header> <nav> <ul> <h1>title of page</h1> <a href="#"><li>home</li></a> <a href="#"><li>portfolio</li></a> <a href="#"><li>about</li></a> </ul> </nav> </header> <div class="row"> <div class="col">col1</div> <div class="col">col1</div> <div class="col">col1</div> </div> *{ margin:0px; padding:0px; } header{ background:orange; color:white; padding:10px; } header h1{ display:inline; position:relative; left:200px; } nav ul{ display:inline; } nav ul li{ display:inline-block; color:white; position:relative; left:70px; } .row{ width:1000px; margin:0 auto; } .col{ background:#999; width:33%; float:left; margin:10px; padding:10px; color:white; height:400px; }
i'm not sure if understood question properly, here's how tried solve it:
tldr: check out fiddle: http://jsfiddle.net/arnellebalane/llzmseoq/
first, wrapped header , row in separate container called .wrapper
, gave width of 1000px
.
<div class="wrapper"> <h1>title of page</h1> <div class="row"> <div class="col">col1</div> <div class="col">col1</div> <div class="col">col1</div> </div> </div>
then changed width of .row
800px
, the width of h1
200px
(adjust these values if want`.
then floated them separate directions sit beside each other.
Comments
Post a Comment