I am a beginner working on my practice portfolio and I have decided to make it fully responsive using flexbox as much as possible. I am following a "mobile-first" approach, so I can address any design issues for desktop later on. One problem I am facing is that my top navigation bar splits my buttons on mobile view. For example, the "About Me" button appears in two lines with the "me" part overlapping the "about". I aim to make all buttons fit within one line or neatly split over two lines without any overlap or text cutoff.
Here is a snippet of my code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
}
.nav-container {
display: flex;
}
nav {
display: flex;
font-family: "Lato", sans-serif;
flex-wrap: wrap;
position: fixed;
}
nav ul {
display: flex;
margin: 5px;
padding: 10px;
list-style-type: none;
justify-content: space-around;
width: 100%;
}
nav ul li {
margin: 5px;
padding: 5px;
}
.header-container {
}
header {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
top: 100px;
}
.headings {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
text-align: center;
}
.cv-container {
display: flex;
align-self: flex-end;
margin-left: 30px;
position: relative;
top: 30px;
right: 30px;
color: #000;
border: 1px solid #000;
}
.cv-container a,
.nav-container a {
text-decoration: none;
color: #000;
padding: 5px;
}
.cv-container a:hover,
.nav-container a:hover {
background-color: #f442aa;
}
strong {
font-style: bold;
}
header h1 {
display: flex;
align-self: center;
font-family: "Lato", sans-serif;
padding: 15px;
}
header h2 {
display: flex;
align-self: center;
font-family: "Playfair Display", serif;
padding: 15px;
}
header a {
font-family: "Lato", sans-serif;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name='viewport'
content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
<title>My Name - Web Designer & Developer</title>
<link rel="stylesheet" href="styles.css"/>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700|Playfair+Display:400,400i,700,700i" rel="stylesheet">
</head>
<body>
<div class="nav-container">
<nav>
<ul>
<li><a href="#">About Me</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<header>
<div class="headings">
<p><h1>Virginia Balseiro</h1></p>
<p><h2>Web Designer & Developer</h2></p>
</div>
<div class="cv-container">
<a href="#"><strong>DOWNLOAD CV</strong></a>
</div>
<div class="social-container">
<a></a>
<a></a>
<a></a>
</div>
</header>I came across some "hacks" online but I would like to implement this properly and gain a better understanding of what I am doing. Thank you in advance for your assistance.