[CSS] Problemi con width

[Bestseller]

Buongiorno a tutti.
Sto progettando un sito e sto avendo non pochi problemi con i css. Praticamente, ho alcuni paragrafi all'interno di un div. Vorrei impostare l'ampiezza dei paragrafi pari al loro contenuto in modo che lo sfondo verde funga da etichetta per il testo. Quello che invece ottengo è che i paragrafi ereditano l'ampiezza del div padre che è maggiore.
Vi ringrazio.
HTML:

<div id="container">
    <p>Sample Text 1</p>
    <p>Sample Text 2</p>
    <p>Sample Text 3</p>
</div>

CSS:

#container {
    width: 30%;
    background-color: grey;
}
#container p{
    background-color: green;
}

[wingman87]

Puoi dare un po' di padding al contenitore in modo che la larghezza non coincida perfettamente, altrimenti se vuoi che la larghezza dipenda dal contenuto puoi fare così:

#container {
    width: 30%;
    background-color: grey;
}
#container p{
    background-color: green;
    display: inline;
}
#container p:after{
    content:"";
    display:block;
}

In pratica i p ora non sono più di tipo blocco (che è il valore default per i p) ma inline, quindi la loro larghezza dipende dal contenuto. Tuttavia essendo inline tra uno e l'altro non andrebbero a capo, per questo subito dopo ogni p viene aggiunto un elemento vuoto di tipo blocco causando così un ritorno a capo.

[Bestseller]

Grazie mille wingman87!
Funziona alla perfezione!