I tried to do the task given in Fundamental Layout Comprehension section using float and display property. I tried to evenly space the list of links located inside the tag using the following css rule:
nav {
background-color: #000;
padding: 0.71163825%;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav {
box-sizing: border-box;
}
nav a {
color: #fff;
text-decoration: none;
padding: .5em 1.44381528%;
}
nav ul li {
display: inline-block;
width: 20%;
}
In my system, 1329.81px is the width of nav container, each li element will have width of 265.962px (which is 20% of nav container), but my browser approximately allocates 265.953px for every li element, that’s not the problem here.
The problem is that between every li element a .(dot)character is automatically added, which takes 5.3333px(4 times) space, because of this, the last li element cannot be able to fit into the nav container on the same row, so it went down to the next line.
I can’t understand, why the .(dot) character added between every li element. Kindly, help me to solve this issue. Thanks in advance.
Picture is added for your reference:
I tried to attach the source code along with this post, the website doesn’t allow me to upload the documents, because I am new user. I have modified only the css file, the whole css rules is pasted below for your reference.
body {
background-color: #fff;
color: #333;
margin: 0;
font: 1.2em / 1.2 Arial, Helvetica, sans-serif;
}
img {
max-width: 100%;
display: block;
}
.logo {
font-size: 200%;
padding: 50px 20px;
margin: 0 auto;
max-width: 980px;
}
.grid {
margin: 0 auto;
padding: 0 20px;
max-width: 980px;
}
nav {
background-color: #000;
padding: 0.71163825%;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav {
box-sizing: border-box;
}
nav a {
color: #fff;
text-decoration: none;
padding: .5em 1.44381528%;
}
nav ul li {
display: inline-block;
width: 20%;
}
.photos {
margin: 0;
padding: 0;
list-style: none;
}
.feature {
width: 200px;
}
article {
width: 70%;
float: left;
}
article img {
float: left;
padding-right: 10px;
}
aside {
width: 30%;
float: left;
}
aside img {
width: 50%;
float: left;
}