How do I keep these three items centralized? Notice that there is a space on the right side.
CSS
div.menu{background-color:#333;overflow:auto;white-space:nowrap;}div.menua{display:inline-block;color:white;text-align:center;padding:15px;width:30%;min-width:30%;max-width:30%;font-size:110%;text-decoration:none;}div.menua:hover{background-color:#777;}HTML
<divclass="menu">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
</div>
How about just changing the display to display: table of div and that of tag a to display:table-cell; . To complete, set width: 100% to div . That way, in addition to not having space caused by padding , you leave something to add more items and it "tunes" width to you.
See two examples below, one with 3 items in the menu and another with 5 items. Both using the same CSS.
div.menu {
display: table;
color: white;
text-align: center;
width: 100%;
font-size: 110%;
background-color: #333;
}
div.menu a {
display: table-cell;
padding: 15px;
text-decoration: none;
color: white;
}
div.menu a:hover {
background-color: #777;
}<div class="menu">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
</div>
<br/>
<br/>
<div class="menu">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Item 4</a>
<a href="#">Item 5</a>
</div>You can use% css% of CSS to calculate column size.
width: calc(100% / 3); /* Altera aqui */
min-width: 30%; /* Tira isso */
max-width: 30%; /* Tira isso */