css - Centering main wrapper with dynamic width -

i have searched , searched. fiddled , tweaked. spent hours trying different suggestions , code ideas...

how can have content on webpage, centered horizontally regards browsers view port. no matter do, end uneven margins , quite noticeable.

the closest far is:

#mystylename  {      margin: 0 auto;      width: 90%;  }

however, because using percentage, no matter margins/alignment defaults being on left edge of page.

extra info: issue relates top-level, outer page element. first or holds content of else.

i not sure asking, here example of af centered <div> percentage with.

i added border-sizing: border-box enables use padding.

#mystylename {    margin: 0 auto;    width: 90%;    display:block;    background:red; /* testing */    box-sizing:border-box;    padding: 10px;  }

<div id="mystylename">    hi!  </div>

WINAPI