Problem z szerokością

Question

Cześć.

Mam problem z szerokością strony, mianowicie wychodzi na to, że strona jest zbyt szeroka (mam na dole scrolla poziomego) i nie potrafię znaleźć przyczyny. Mógłby ktoś w wolnym czasie mi pomóc? Z góry dziękuję

body
{
	background-color:  #fa990c;
	color: white;
	width: 100%;
	margin: 0 !important;
	
}

#container
{
width: 100%;

	
}

#logo
{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
	
}

#menu
{
text-align: center;
border: 5px solid gray;
padding: 10px;
width: 100%;
}

#topbar
{
letter-spacing: 3px;
text-align: center;
border: 5px dotted;
width: 100%;
	
}

#content
{
width: 1000px;
margin-left: auto;
margin-right: auto;
text-align: justify;	
padding: 20px;
}

#footer
{


	
}

.option
{
	
	float: left;
    min-width: 50px;
	height: 25px;
	font-size: 18px;
	padding: 2px;
	border-right: 2px solid #444444;
	opacity: 0.8;
}

.option:hover
{
	background-color: black;
	cursor: pointer;
	
}

 

 

Answer 1

Jeśli nie masz ustawionej reguły:

box-sizing: border-box

to pracujesz na normalnym modelu pudełkowym (takie polskie często stosowane tłuaczenie). Poczytaj na: https://developer.mozilla.org/pl/docs/Web/CSS/box-sizing

Bez tego szerokość border nie wlicza się w width, dlatego wykraczasz o 2 x 5px po za 100% szerokości elementu.