Spreading out Centered Navigation Bar in HTML - html

Question

Banners
I am looking to "spread out" my centered banner in HTML. I was able to actually spread out the text, but I want to make the links from the banner bigger, as they are currently on the size of my text. If any clarification is needed, please let me know.
body {
margin: 0;
font-family: Times New Roman;
}
.topnav {
overflow: hidden;
background-color: #0F5AEA;
display: flex;
justify-content: center;
justify-content: space-between;
}
.topnav a {
float: left;
color: #F2F2F2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #BBEAFA;
color: black;
}
.topnav a.active {
background-color: #6F16A5;
color: white;
}
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<div style="padding-left:16px">
<h2>Top Navigation Example</h2>
<p>Some content..</p>
</div>

Answer 1

Simply add flex-grow: 1 to the navigation links. If you want all of them to be the same width, you can use flex: 1 which does the same as a combination of flex-grow: 1 and flex-basis: 0.
.topnav a {
flex-grow: 1; // or flex: 1;
float: left; // this does not have effect on flex items by the way
color: #F2F2F2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
If you want to learn more, there is no need to repeat already well documented:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
Here is one of your options:
body {
margin: 0;
font-family: Times New Roman;
}
.topnav {
overflow: hidden;
background-color: #0F5AEA;
display: flex;
justify-content: center;
justify-content: space-between;
}
.topnav a {
flex: 1;
float: left;
color: #F2F2F2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #BBEAFA;
color: black;
}
.topnav a.active {
background-color: #6F16A5;
color: white;
}
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<div style="padding-left:16px">
<h2>Top Navigation Example</h2>
<p>Some content..</p>
</div>

Answer 2

Just give it a max-width:25% and force width: 100%. Also you do not need float since you're using flex.
.topnav a {
max-width: 25%;
width: 100%;
color: #F2F2F2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
Check it live on Codepen here.