как разместить изображения точно в позиции меню

Question

Привет, в приведенном ниже коде я хочу отобразить navigationMenu и слайдер в той же строке. Но моя проблема заключается в том, что они отображаются в одной строке, но изображения получили левую сторону в некотором пространстве.

Как перемещать изображения влево с шириной и высотой.

HTML

<div id="main"> 

<ul id="navigationMenu"> 
    <li> 
     <a class="home" href="index.html"> 
      <span>Home</span> 
     </a> 
    </li> 

    <li> 
     <a class="about" href="About.html"> 
      <span>About Us</span> 
     </a> 
    </li> 

    <li> 
     <a class="services" href="Specialties.html"> 
      <span>Specialties</span> 
     </a> 
    </li> 

    <li> 
     <a class="portfolio" href="facilities.html"> 
      <span>Facilities</span> 
     </a> 
    </li> 

    <li> 
     <a class="contact" href="Contact.html"> 
      <span>Contact us</span> 
     </a> 
    </li> 
</ul> 

</div> 
<div id="sliders1"> 
     <div id="slider"> 
     <div class="gallery"> 
     <ul class="images"> 
      <li class="show"><img style="padding-right:40px" width:950;height:300px" src="img/1.jpg" alt="photo_one" /></li> 
      <li><img width="950" height="300" src="img/2.jpg" alt="seascape" /></li> 
      <li><img width="950" height="300" src="img/3.jpg" alt="seascape" /></li> 
      <li><img width="950" height="300" src="img/4.jpg" alt="seascape" /></li> 
      <li><img width="950" height="300" src="img/5.jpg" alt="seascape" /></li> 
      <li><img width="950" height="300" src="img/6.jpg" alt="seascape" /></li> 
     </ul> 
     </div> 
    </div> 
    </div> 

CSS

#sliders1 { 
    width: 1050px; 
    overflow: hidden; 
    margin:0px auto 0px 120px; 
    height:300px; 
} 
.gallery{ 
    width:100%; 
    height:100%; 
} 

ul.images { 
    width:1050px; 
    height:100%; 

    overflow:hidden; 
    position:relative; 
    margin:0px auto; 
    padding:0; 

} 

ul.images li { 
    position:absolute; 
    margin:0; 
    padding:0; 
    left:0; 
    right:0; 
    list-style:none; 
} 

ul.images li.show { 
    z-index:500; 
    width:1050px; 
    height:300px; 
overflow:hidden; 
    background-size:100% 100%; 
} 

ul.images li img { 
    border-style: none; 
    width:1050px; 
    height:100%; 
    outline:none; 
} 

Answer 1

Просто измените position атрибут mainID дел до absolute. Используйте это:

position:absolute; 

Примечание: Вы столкнулись с проблемой из-за правой боковой секции main ID потребляющего пространство.

Полный CSS:

#main { 
    margin: 0px auto; 
    position: absolute;/*changed*/ 
    width: 40px; 
    float: left; 
} 

Answer 2

.wrap { 

    position: relative; 

} 
nav { 
    background-image: linear-gradient(#fff, #ccc); 
    border-radius: 6px; 
    padding: 0 20px; 
    position: relative; 
} 

.menu { 
    background: none repeat scroll 0 0 #fff; 
    position: absolute; 
    width: 100%; 
    z-index: 9999; 
}