Mam div o określonych wymiarach (500x200) i zrobiłem tak, że jak to co jest w środku jest wyższe niż 200px to wtedy pojawia się pasek przewijanie (overflow-y: auto;). Dodam, że content w tym okienku wygląda tak:

<p>x</p>
<p>y</p>
<p>z</p>
[...]

To są wiersze pobierane z bazy danych mysql.

Wszystko działało że aż miło, ale przeniosłem tego diva na stronę, gdzie jest bootstrap i wygląda to tak:



Nie mam pojęcia skąd się bierze ten margines chociaż wszędzie dałem margin: 0; i padding: 0; dla znacznika <p> tak samo...

Pasek ładnie pięknie jest po prawej stronie, tylko że całość jest wysunięta w prawo...

Co lepsze, jeśli usunę to:

overflow-y: auto;
overflow-x: hidden;

to wtedy mam dwa pierwsze wiersze wysunięte na prawo (jak na screenie), ale dalej jest wszystko dobrze (wyrównane elegancko do lewej)

O co może chodzić?

[HTML] pobierz, plaintext 
overflow-y: auto;
overflow-x: hidden;
height: 200px;
width: auto;
padding: 5px 10px 5px 10px;
margin: 0px;
[HTML] pobierz, plaintext 

a elementy nie dziedziczą może po jakimś divie marginu albo paddingu?

zawsze możesz dać ujemny margines np: margin-left -20px; - ale to nie jest najlepsze rozwiązanie.

Może gdzieś używasz w stylach float. Jeśli tak to poczytaj sobie o clear:both vs overflow