Jak wyrównać okienka

pytanie zadane 5 października 2016 w HTML i CSS przez DariuszH Gaduła (3,100 p.)
edycja 5 października 2016 przez DariuszH

Jak wyrównać  okienka menu, gdyż ostatnie okienko "niedociąga" do końca prawego brzegu przeglądarki ?

<!DOCTYPE html>
<HTML>
<HEAD>
<META charset="UTF8">
<link rel="Stylesheet" type="text/css" href="index.css" />
<link href="https://fonts.googleapis.com/css?family=Anton|Asap|Baloo+Da" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="index.js">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  
</HEAD>








<BODY>


	<div class="main">
		<div class="sport">Q FORMIE</div>
	
		<div class=""></div>
	
	
	 
	<div class=""></div>
	<div class=""></div>	
	<div class=""></div>	
	
	
	
		

	</div>
	
<!---------CENTRUM---------------->	
	
	<div class="centrum">
	
		<div class="menu">
		
			<div class="x">BIEGANIE</div>
			<div class="x">FIZJOLOGIA</div>
			<div class="x">TRENING</div>
			<div class="x">SPRZĘT</div>
			<div class="x">MOTYWACJA</div>
			<div class="x">ENDOMONDO</div>
			<div class="x">O MNIE</div>
		
		</div>

	
		<div class="mobile">
		
		
			
		
		
		</div>
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	


		<div class="window"></div>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
		<div class="box5"></div>
		<div class="box6"></div>
		<div class="box7"></div>
		<div class="box8"></div>


	</div>







<!-----------DOWN---------->

<div class="down">

	
</div>




</BODY>


<!--------------jQuery----------------->



<script>








</script>











</HTML>

html{
	
	width:100%;
	
}



body{
	
	margin:0vh;
	width:100%;
	
}

.main{
	
   
	width:100%;
	height:10vh;
	background-repeat:no-repeat;
	background-color:black;
	background-size: 100% 100%;	
	
	
}
.centrum{
	
	width:100%;
	height:350vh;
	background-repeat:no-repeat;
	background-color:white;
	background-size:100% 100%;
    
}
.sport{
	position:relative;
	left:3vh;
	width:45vh;
	line-height:10vh;
	color:white;
	font-size:5vh;
	font-family: 'Baloo Da', cursive;
	font-family: 'Anton', sans-serif;
	font-family: 'Asap', sans-serif;
	letter-spacing:0.5vh;
	margin:0vh;
	display:none;
	
}

.menu{
	
	
	width:100%;
	display:inline;
}

.x{
	float:left;
	width:14.11571%;
	border-right:0.01vh solid white;
	height:6vh;
    margin:0vh;
	background-color:#33ccff;
	background-size:100% 100%;

	color:white;
	line-height:6vh;
	text-align:center;
	font-size:2.5vh;
	font-family: 'Baloo Da', cursive;
	font-family: 'Anton', sans-serif;
	font-family: 'Asap', sans-serif;
	
	
}









 .menu{
	 
	 width:100%;
	 height:6vh;
	 
	 
 }
 

 
 
  
@media all and (max-width: 126vh) {
  .menu {
    display: none;
  }
  
  .mobile{
	  
	display:block;  
	width:7vh;
    height:7vh;	
	background-color:#33ccff;
	background-size:100% 100%;
	position:absolute;
	top:12vh;
	right:3vh;
	border-radius:100%;
	
  }
  
}
  
  
  
  
  
  
  
  


























.down{
	
	width:100%;
	height:19vh;
	background-color:black;
	background-size: 100% 100%;	
	background-repeat:no repeat;

}

1 odpowiedź

odpowiedź 5 października 2016 przez Ambroz Obywatel (1,840 p.)

Zobacz czy pomoże ci ta instrukcja na całym body.

margin: 0 auto;

komentarz 5 października 2016 przez DariuszH Gaduła (3,100 p.)

Nie działa, ponieważ dla wszystkich elementów menu to div class="x". Wszystkie mają ten sam width i margin-right i przeszkadza ostatni margin-right przy elemencie "o mnie" Właśnie to jest ten problem, który chcę rozwiązać. Jedno już mam, mianowicie dla każdego elementu menu np. o mnie; biegi; endomondo są przypisane oddzielnie divy, ale mają te same parametry w css. Chciałem skrócić menu do jednego selektora css :)