html - Header - position image next to the navbar and make the image "stick" to it. After that center both elements horizontally at the bottom of the header -

it's kinda hard explain. have rather big header width of 90% of document's width. need center navbar horizontally @ bottom of header image "sticking" on left side. image bigger navbar navbar shouldn't become bigger because of image. on top of half of image should "reach out" of header guess has absolute positioning. know how position navbar @ bottom don't quiet how other stuff. understand horrible explanation drew show mean: drawing

i hope can me that.

i tried kind of (i know it's not greatest example that's how tried it):

    * {         padding: 0;         margin: 0;     }      #header {         position: relative;         width: 80%;         height: 700px;         margin: 0 auto;         background-color: yellow;     }      #main_nav {         position: absolute;         bottom: 0;         margin: 0 auto;         left: 0;         right: 0;         width: 80%;     }      #main_nav > ul {         display: block;         list-style-type: none;         width: 100%;         text-align: center;     }      #main_nav > ul li {         display: inline-block;         width: 15%;         height: 70px;         line-height: 70px;         color: white;         text-align: center;         background-color: blue;     }      .image {         width: 350px;         height: 185px;         line-height: 185px;         background-color: red;         color: white;         font-size: 48px;         text-align: center;         margin-bottom: -120px;     }      main {         margin-top: 150px;         padding: 50px;         text-align: center;         font-size: 32px;     } 

the body:

<div id="header">     <nav id="main_nav">         <div class="image">image</div>         <ul>             <li>nav 1</li>             <li>nav 2</li>             <li>nav 3</li>             <li>nav 4</li>         </ul>     </nav> </div>  <main>     lorem ipsum dolor sit amet, consectetur adipisicing elit. labore aperiam fugit consequuntur voluptatibus ex, sint iure in, distinctio sed dolorem aspernatur veritatis repellendus dolorum voluptate, animi libero, officiis eveniet accusamus! </main> 

i'd have image stick left side of navigation , center them both horizontally (and without overlaying each other it's happening). , negative positioning right way move image?

you try centering container using margin: 0 auto; , having image positioned negative top margin. position menu part left padding push past width of image.