align five divs equally next to each other - html

Question

I'm even finding it difficult to phrase my question right so bear with me here please.
I have one div that serves as the main container of my page. Inside that div I would like to have five other divs which have equal size and equal margins. However when I calculate everything right, the fifth div always jumps to the next line.
I hope this makes sense. This is my code:
CSS and HTML as follows
#content {
position: absolute;
width: 1000px;
height: 500px;
left: 50%;
top: 50%;
margin-left: -500px;
margin-top: -250px;
border: 2px solid #f9423a;
border-radius: 10px;
background-color: #3eb1c8;
overflow: hidden;
}
.bookmark {
display: inline-block;
width: 15%;
height: 20%;
margin-left: 2%;
margin-right: 2%;
margin-top: 2.5%;
border: 1px solid #f9423a;
border-radius: 10px;
background-color: #f9423a;
}
<div id="content">
<div class="bookmark"></div>
<div class="bookmark"></div>
<div class="bookmark"></div>
<div class="bookmark"></div>
<div class="bookmark"></div>
<div class="bookmark"></div>
<div class="bookmark"></div>
<div class="bookmark"></div>
<div class="bookmark"></div>
<div class="bookmark"></div>
<div class="bookmark"></div>
<div class="bookmark"></div>
<div class="bookmark"></div>
<div class="bookmark"></div>
<div class="bookmark"></div>
</div>
Note that I'm just working with color-filled divs to see if it's working.
As you can see it almost works, the online thing that bothers me is that there's a bit more margin on the right than there is on the left. I would like to have equal margins between the sides and the outer elements, and between the inner elements of course.
I hope someone understands my question!

Answer 1

This is because you are using: display: inline-block which reads the white space between your divs on your HTML code as a literal white space, like putting a space between words, that breaks the layout.
Try changing your sintax like this:
<div>content</div><div>
content2</div><div>
content3</div><div>
content4</div><div>
content5</div>
Then, for the CSS you could use calc(); to add borders, that would ruin your layout too.
Like this:
div {
width: calc(20% - 4px);//20*5 = 100 - 2px on each side each time
border: 2px solid black;
}
JS Fiddle
body {
margin: 0 0 0 0;
}
div {
text-align: center;
display: inline-block;
width: calc(20% - 4px);
/*20*5 = 100 - 2px on each side each time*/
border: 2px solid black;
background-color: red;
}
<div>content1</div><div>
content2</div><div>
content3</div><div>
content4</div><div>
content5</div>

Answer 2

check this example, if this is what you wanted
Here i have removed the right margin and increased the bookmark div with to 17%
.bookmark {
display: inline-block;
width: 17%;
height: 20%;
margin-left: 2%;
margin-top: 2.5%;
border: 1px solid #f9423a;
border-radius: 10px;
background-color: #f9423a;
}
https://jsfiddle.net/0gkfp7zr/

Answer 3

Aramil's answer is good and correct correct. There is no "nice" way to deal with this. Different people have different methods, but they are all a bit hackish. The way I prefer to do it is with comments as follows:
<div class="bookmark"></div><!--
--><div class="bookmark"></div><!--
--><div class="bookmark"></div><!--
--><div class="bookmark"></div><!--
--><div class="bookmark"></div>
Basically you don't want any white space between one closing div and the next opening div. Sometimes if my content is short enough I will put them all together on one line as you see below, but it makes it much harder to read.
<div class="bookmark"></div><div class="bookmark"></div><div class="bookmark"></div><div class="bookmark"></div><div class="bookmark"></div>

Answer 4

add this to .bookmark
float:left and the add .8 to the width of bookmark, your computation is not equal because in 1 bookmark div you have 15% plus the margin-left and right which is 4%, total of 1 div is 19 x 5 = 95 so I added .8 to fill the remaining white spaces. 19.8 x 5 = 99
.bookmark {
display: inline-block;
width: 15.8%;
height: 20%;
margin-left: 2%;
margin-right: 2%;
margin-top: 2.5%;
border: 1px solid #f9423a;
border-radius: 10px;
background-color: #f9423a;
float: left;
}