HTML/CSS - 4 Inline Block Elements of 200 Width in an 800 Width Container Not Fitting on One Line

Question

I'm in the very early stages of creating a simple site. I'm trying to make a nav with 4 buttons that all take up 25% width inside an 800px container div. The buttons are all set to display inline-block and are 200px wide as they should be, but the 4th element is getting pushed onto a new line. Picture of issue.

At first I thought the border of the container div was messing things up, but i added box-sizing: border-box; and it didn't fix the issue. I then changed from a border on the container div to an outline, also with no luck. Using Chrome's Inspect Element tool, I can see that each button is 200px wide, yet they still won't fit on one line. HTML and CSS of these portions are below:

HTML

        <h1>Midwestern Accent</h1>
        <div id="nav_div">
            <div class="nav_button button_border">Home</div>
            <div class="nav_button button_border">About</div>
            <div class="nav_button button_border">Music</div>
            <div class="nav_button">Contact</div>

        </div>

CSS

#content_div {
font-family: Arial, Helvetica, sans-serif;
margin: auto;
width: 800px;
background-color: black;
color: white;
/*border-width: 5px;
border-color: white;
border-style: solid;
box-sizing: border-box; */
outline: 5px solid white;
}

#nav_div {
border-style: solid;
border-color: white;
border-width: 0px 0px 5px 0px;
width: 100%;
vertical-align: top;
}

.nav_button {
text-align: center;
width: 25%;
display: inline-block;
font-size: 30px;
vertical-align: top;
}

Try this https://jsfiddle.net/2Lzo9vfc/124/ – Nenad Vracar Nov 18 '15 at 16:52 — Nenad Vracar, Nov 18 '15 at 16:52

score 0 · Accepted Answer · answered Nov 18 '15 at 16:27

Inline block elements, like inline have natural spacing after them.

This is a good article on CSS tricks which explains different methods to getting around it.

Personally, I use the -4px margin-right fix.

.nav_button {
  text-align: center;
  width: 25%;
  display: inline-block;
  margin-right: -4px;
  font-size: 30px;
  vertical-align: top;
}

HTML/CSS - 4 Inline Block Elements of 200 Width in an 800 Width Container Not Fitting on One Line

1 Answers1