Having trouble moving a navigation area (links) all the way to the right

Good morning,

I’m having some difficulty moving my navigation area all the way to the right. The site in question is at www.markallanholley.com. I’m attempting to move “Bio - Contact - Community - Login - Portfolio” to the right of the screen. I’ve tried justify-self: end; align-self: end; and justify-content: end; in my .topnav class. Any assistance would be greatly appreciated. Here’s the complete HTML and CSS Code.

<!DOCTYPE html>

<html>

	<head>
		<title>Mark Allan Holley - Designer</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link href="styles.css" rel="stylesheet" type="text/css">
		<link href="https://fonts.googleapis.com/css2?family=Forum&family=Patua+One&family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> 
	</head>
	
	<body>
		<div class="container">				
			<div class="top">
			
				<div class="logolink">
					<a href="../index.html"><img src="../links/mahlogo.png" width="140px" height="61px" class="responsive"></a>
				</div>
				
				
				<nav class="topnav">
					<ul>
						<li><a href="bio.html">Bio</a></li>
						<li><a href="contact.html">Contact</a></li>
						<li><a href="community/index.php">Community</a></li>
						<li><a href="login.html">Login</a></li>
						<li><a href="portfolio.html">Portfolio</a></li>
					</ul>
				</nav>
			</div>
			
			<section class="leftsection">
				<h1>Hello and Welcome</h1>
				<br>
				<p>I’m a designer living in Central New York. This website is still being constructed. If you’d like to learn more about me and the type of work that I do, please select <a href="bio.html">Bio</a> or <a href="portfolio.html">Portfolio</a> from the links. If you’ve hired me and if you want to view a work in progress, please log in using the <a href="login.html">Login</a> link. I have a Contact form for you if you select <a href="contact.html">Contact</a>, or you can email me anytime at:</p>
				<br>
				<address>
					<a href="mailto:markallanholley@gmail.com">markallanholley@gmail.com</a>
				</address>
				<br>
				<p>The Community link is just me practicing installing forum software. You’re welcome to register if you’d like, but I don’t anticipate any activity there.</p>
			</section>

			<div class="divider">
				<img src="../links/verticaldivider.png" height="966" width="10">
			</div>

			<section class="rightsection">

			 <figure>
			 	<img src="../links/notarobot.jpg" alt="Sad robot looking at computer."  class="responsive"> 
			 	<figcaption>"Not A Robot" 2019, Blender, Photoshop</figcaption>
			</figure>

			</section>
			<footer class="bottomnav">
				<ul>
					<li><a href="bio.html">Bio </a></li>
					<li><a href="contact.html">Contact</a></li>
					<li><a href="community/index.php">Community</a></li>
					<li><a href="login.html">Login</a></li>
					<li><a href="portfolio.html">Portfolio </a></li>
					<li>&#8226; Copyright 2020 Mark Holley</li>
				</ul>
				
			</footer>
		</div>
	</body>

</html>
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

p {
	padding: 1em;
	font-size: 110%;
	font-family: 'Work Sans', sans-serif;
	letter-spacing: 1.5px;
	line-height: 150%;
}

h1 {
	padding-top: 1em;
	padding-left: .5em;
	font-family: 'Forum', cursive;
	font-size: 200%;
}


nav li {
	display: inline-block;
	list-style: none;
}

footer li {
	display: inline-block;
	list-style: none;
}

address {
	padding: 1em;
	font-size: 110%;
	font-family: 'Work Sans', sans-serif;
}

a {
	font-family: 'Work Sans', sans-serif;
	font-weight: normal;
}

.container {
    display: grid;
    grid-template-columns: 1fr 10px 1fr;
    /*grid-template-columns: repeat(auto-fit, minmax(1fr, 10px, 1fr));*/
    grid-template-rows: 1fr, 80%, 1fr;
    grid-row-gap: 5px;
    grid-column-gap: 5px;
}

.top {
    grid-row: 1 / span 1;
    grid-column: 1 / span 3;
    background-image: url("../links/topnavbackground.jpg");
}

.topnav {
	display: inline-block;
	grid-row: 1 / span 1;
	grid-column: 3 / span 3;
	justify-self: end;
	align-self: end;
	justify-content: end;
}

.logolink {
	display: inline-block;
	margin: 20px;
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
}

.leftsection {
    grid-row: 2 / span 1;
    grid-column: 1 / span 1;

}

.divider {
    grid-row: 2 / span 4;
    grid-column: 2 / span 1;
    padding-top: 1em;
    padding-bottom: 1em;

}

.rightsection {
    padding: 1em;
    grid-row: 2 / span 1;
    grid-column: 3 / span 1;
}

.bottom {
    grid-row: 3 / span 1;
    grid-column: 1 / span 3;

}

.responsive {
  max-width: 100%;
  height: auto;
}



/*img:hover {
	transform: scale(1.1);
}*/

/* unvisited link */
nav a:link {
	color: white;
	font-weight: bold;
	text-decoration: none;
}

/* visited link */
nav a:visited {
	color: white;
	font-weight: bold;
	text-decoration: none;
}

/* mouse over link */
nav a:hover {
	color: black;
	font-weight: bold;
	text-decoration: none;
}

/* selected link */
nav a:active {
	color: lightpurple;
	font-weight: bold;
	text-decoration: none;
} 


/* Fonts from Google Fonts */

/*
    font-family: 'Forum', cursive;
    font-family: 'Patua One', cursive;
    font-family: 'Work Sans', sans-serif;

*/

You could do:

topnav {
    display: inline-block;
    grid-row: 1 / span 1;
    grid-column: 3 / span 3;
    /* justify-self: end; */
    /* align-self: end; */
    /* justify-content: end; */
    float: right;
    margin: 10px;
    padding-top: 65px;
}

The padding-top is to move the links down away from the top of the window, but I don’t know whether you’d want the links there or somewhere else.

Thank you so much thepitycoder. I keep forgetting that float can be used in conjunction with grid stuff, and I should probably remember that you can also use flexbox with grid, though I don’t think I’m at quite that level of sophistication or experience yet. :slight_smile:

No problem.

I’m not entirely sure whether float would be the best way to do it, but it’s certainly a way to do it. :slight_smile:

Can always revisit if it breaks something further down the line as you carry on building your site; which, I must say, looks pretty sharp. :+1: