How can I make the link divs to fill the navigation container?

Question

I am trying to develop a web page that can be responsive to screen size. However I cannot figure out a way to do this and to fill the nav div with the link divs. I have a screen shot below and code to follow. There is also an issue with small screen sizes and the link divs. I would like the divs to shrink with the screen and not stack on top of each other. At least until a certain point. Information about this would be helpful as well. Also, explaining why these things happen helps a lot as well so if you like. Then please tell.

HTML:

<nav id="nav">
            <a href="FYFHome.html" ><div id="link"><p>Home</p></div></a>
            <a href="FYFHome.html" ><div id="link"><p>Services</p></div>      </a>
            <a href="FYFHome.html" ><div id="link"><p>Our Customers</p></div></a>
            <a href="FYFHome.html" ><div id="link"><p>Contact</p></div></a> 
        </nav>

CSS:

#link
{
    height: 70%;
    width: 25%;
    display: inline-block;
    border: 1px dotted green;
    text-decoration: none;
    text-align: center;
    padding: none;
}

#nav
{
    border: 1px solid black;
    width: 100%;
    height: 80px;
    margin: auto;
}

Answer 1

Here's a JSFiddle

25% would fit, but since you add 2 pixels border (1px left and 1px right) to your div, it is too wide. The best way to include the border (or padding and margin) is the calc() function, so use calc(25% - 2px) . The next issue is the white space between the divs. They are there because of the spaces / line breaks between the elements. Just add the end tag of one element in the line of the next one (or simply just the > )

<nav id="nav"> 
 <a href="FYFHome.html"><div id="link"><p>Home</p></div></a
 ><a href="FYFHome.html"><div id="link"><p>Services</p></div></a
 ><a href="FYFHome.html"><div id="link"><p>Our Customers</p></div></a
 ><!-- No more line breaks or spaces between the elements --><a href="FYFHome.html"><div id="link"><p>Contact</p></div></a> 
</nav>

To change the CSS for smaller screens just add to your style file

@media screen and (max-width: 320px) { 
    /* Your CSS for screens smaller than 320px */
}

You can add as many of those as you like, so you could have different CSS-styles for different screen sizes.

Answer 2

Just add float:left

 *{box-sizing: border-box;} #nav { border: 1px solid black; width: 100vw; height: 80px; margin: auto; } #link { height: 70%; width: 25%; display: inline-block; float: left;/*add this*/ border: 1px dotted green; text-decoration: none; text-align: center; padding: none; } 

 <nav id="nav"> <a href="FYFHome.html"> <div id="link"> <p>Home</p> </div> </a> <a href="FYFHome.html"> <div id="link"> <p>Services</p> </div> </a> <a href="FYFHome.html"> <div id="link"> <p>Our Customers</p> </div> </a> <a href="FYFHome.html"> <div id="link"> <p>Contact</p> </div> </a> </nav>