Почему мой слайдер не отображается правильно на моей веб-странице

Question

Я хочу показать мой сканер (Img) в центре моей веб-страницы, но он не отображает его правильно. Он отображает его больше на левой стороне &, не отображая его полностью. Кто-нибудь может мне помочь. Заранее спасибо. Также моя часть заголовка не отображается, с проблемой слайдера.

Вот мой код.

<div class="Container"> 
<div class="Header"> 
<div class="Slider"> 
<div class="Center"> 
    <div class="Chat"> 
     <div class="Chat_Icon"> 
     <img src="Slicing & Images/Chat_Icon.png" /> 
     </div> 
     <div class="Live"> 
     <h5> Live Chat 24/7 </h5> 
     </div> 
     <div class="Number"> 
     <h5> +1 970 950 7000 </h5> 
     </div> 
    </div> 
    <div class="Social_Media"> 
     <div class="Follow_Us"> 
     <h5> Follow Us On: </h5> 
     </div> 
     <div class="Social_Icons"> 
     <img src="Slicing & Images/Fb_Icon.png" /> 
     </div> 
     <div class="Social_Icons"> 
     <img src="Slicing & Images/Twi_Icon.png" /> 
     </div> 
     <div class="Social_Icons"> 
     <img src="Slicing & Images/Goo+_Icon.png" /> 
     </div> 
    </div> 
    <div class="Company_Logo"> 
     <div class="Logo"> 
     <img src="Slicing & Images/Logo.png" /> 
     </div> 
     <div class="Name"> 
     <h2> ORICOM </h2> 
     <h3> Creative </h3> 
     <h4> Group </h4> 
     </div> 
    </div> 
    <div class="Company_Info"> 
     <div class="Company_Type"> 
     <h1> CREATIVITY, INOVATION, SIMPLICITY </h1> 
     </div> 
     <div class="Company_Detail"> 
     <p> Everything you imagine, from dream to Reality, from Imagination to Completeness ORICON Creative Group is a plateform for your evey wish, every idea to become true. Because we simple beleive into  “You Imagine, We Done” </p> 
     </div> 
     <div class="Read_Btn"> 
     <input type="button" value="READ MORE" /> 
     </div> 
    </div> 
</div> 
<div class="Navigations"> 
    <div class="Navigation_Menu"> 
     <div class="Navigation_style"> 
     <img src="Slicing & Images/Nav_Box.png" /> 
     </div> 
     <div class="Navigation_style"> 
     <img src="Slicing & Images/Nav_Box.png" /> 
     </div> 
     <div class="Navigation_style"> 
     <img src="Slicing & Images/Nav_Box.png" /> 
     </div> 
     <div class="Navigation_style"> 
     <img src="Slicing & Images/Nav_Box.png" /> 
     </div> 
     <div class="Navigation_style"> 
     <img src="Slicing & Images/Nav_Box.png" /> 
     </div> 
     <div class="Navigation_style"> 
     <img src="Slicing & Images/Nav_Box.png" /> 
     </div> 
     <div class="Navigation_style"> 
     <img src="Slicing & Images/Nav_Box.png" /> 
     </div> 
     <div class="Navigation_list"> 
     <ul> 
      <li> <a href=""> 1 </a> </li> 
      <li> <a href=""> 2 </a> </li> 
      <li> <a href=""> 3 </a> </li> 
      <li> <a href=""> 4 </a> </li> 
      <li> <a href=""> 5 </a> </li> 
      <li> <a href=""> 6 </a> </li> 
      <li> <a href=""> 7 </a> </li> 
     </ul> 
     </a> 
     <div class="Navigation_list"> 
      <ul> 
       <li> 
        <a href="" > 
        <h3> HOME </h3> 
        <h4> Who We Are </h4> 
        </a> 
       </li> 
       <li> 
        <a href="" > 
        <h3> ABOUT </h3> 
        <h4> What We Do </h4> 
        </a> 
       </li> 
       <li> 
        <a href="" > 
        <h3> COMPANY </h3> 
        <h4> Our Brief History </h4> 
        </a> 
       </li> 
       <li> 
        <a href="" > 
        <h3> SRRVICES </h3> 
        <h4> Our Expertices </h4> 
        </a> 
       </li> 
       <li> 
        <a href="" > 
        <h3> PROJECTS </h3> 
        <h4> Our Creative Work </h4> 
        </a> 
       </li> 
       <li> 
        <a href="" > 
        <h3> OUR BLOG </h3> 
        <h4> Wht’s going on? </h4> 
        </a> 
       </li> 
       <li> 
        <a href=""> 
        <h3> CONTACTS </h3> 
        <h4> Keep in touch with us </h4> 
        </a> 
       </li> 
      </ul> 
     </div> 
     </div> 
    </div> 
</div> 
body { 
float: left; 
margin: 0; 
padding: 0; 
width: 100%; 
font-family: 'Titillium Web', sans-serif; 
} 
.Container { 
float: left; 
margin: 0; 
padding: 0; 
width: 100%; 
} 
.Slider { 
background-image: url("Slicing & Images/Slider.png"); 
background-repeat:no-repeat; 
float: left; 
width: 100%; 
} 
.Header { 
background-color: #7f7f7f; 
float: left; 
height: 60px; 
width: 100%; 
} 
.Center { 
float: left; 
margin: 0 10%; 
width: 80%; 
} 
.Chat { 
float: left; 
margin: 1% 0; 
width: 30%; 
} 
.Chat_Icon { 
float: left; 
margin: 2% 0 0; 
width: 6%; 
} 
.Chat_Icon > img { 
float: left; 
width: 100%; 
} 
.Live { 
float: left; 
margin: 0 0 0 3%; 
width: 85%; 
} 
.Live > h5 { 
color: #fff; 
float: left; 
margin: 0; 
width: 100%; 
} 
.Number { 
float: left; 
margin: 0 0 0 0; 
width: 100%; 
} 
.Number > h5 { 
color: #fff; 
float: left; 
margin: 0; 
width: 100%; 
} 
.Social_Media { 
float: left; 
margin: 0 0 0 30%; 
width: 40%; 
} 
.Follow_Us { 
float: left; 
margin: 0 0 0 50%; 
width: 30%; 
} 
.Follow_Us > h5 { 
color: #fff; 
float: left; 
text-align: center; 
width: 100%; 
} 
.Social_Icons { 
float: left; 
margin: 8% 1%; 
width: 4%; 
} 
.Social_Icons > img { 
float: left; 
width: 100%; 
} 
.Company_Logo { 
float: left; 
width: 100%; 
} 
.Logo { 
float: left; 
margin: 0 0 0 50%; 
width: 4%; 
} 
.Logo > img { 
float: left; 
width: 100%; 
} 
.Name { 
float: left; 
margin: -2% 0 0 4%; 
width: 30%; 
} 
.Name > h2 { 
color: #c15dc3; 
float: left; 
width: 0; 
} 
h3 { 
color: #90d28f; 
font-size: 20px; 
margin: 20% 0 0; 
width: 20%; 
} 
h4 { 
color: #99d7e6; 
float: left; 
font-size: 20px; 
margin: -11.9% 0 0 33%; 
width: 20%; 
} 
.Company_Info { 
background-color: #7f7f7f; 
float: left; 
height: 200px; 
margin: 0 10%; 
opacity: 0.4; 
width: 80%; 
} 
.Company_Type { 
float: left; 
margin: 0 15%; 
width: 70%; 
} 
h1 { 
color: #9dde9c; 
float: left; 
font-size: 20px; 
text-align: center; 
width: 100%; 
} 
.Company_Detail { 
float: left; 
margin: 0 10%; 
width: 80%; 
} 
p { 
color: #fff; 
float: left; 
font-size: 13px; 
margin: 0; 
text-align: center; 
width: 100%; 
} 
.Read_Btn { 
float: left; 
margin: 0 25%; 
width: 50%; 
} 
input { 
background-color: #fff; 
color: #c15dc3; 
float: left; 
height: 30px; 
margin: 0 25%; 
text-align: center; 
width: 30%; 
} 
.Navigations { 
float: left; 
width: 100%; 
} 
.Navigation_Menu { 
float: left; 
width: 100%; 
} 
.Navigation_style { 
float: left; 
width: 14.28%; 
} 
.Navigation_style > img { 
float: left; 
width: 100%; 
} 
.Navigation_list { 
float: left; 
width: 100%; 
} 
ul { 
float: left; 
margin: 0; 
width: 90%; 
} 
li { 
float: left; 
list-style: outside none none; 
width: 14%; 
} 
a { 
color: #c15dc3; 
float: left; 
text-decoration: none; 
width: 100%; 
} 

Answer 1

Я сделал некоторые изменения в классе CSS, проверьте результат на this fiddle

HTML:

<div class="container"> 
    <div class="slider clearfix"> 
     <div> 
      Slide 1 
     </div> 
     <div> 
      Slide 2 
     </div> 
     <div> 
      slide 3 
     </div> 
    </div> 
</div> 

CSS:

.clearfix:after { 
    content: "."; 
    clear: both; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 

.container { 
    border: 1px solid grey; 
    padding: 10px; 
    width: 90%; 
} 

.slider { 
    border: 1px solid red; 
    margin: 0 auto; 
    padding: 5px; 
    width: 90% 
} 

.slider div { 
    border: 1px solid green; 
    float: left; 
    margin: 0 atuo; 
    padding: 10px; 
    width: 28.50% 
}