How to align articles on HTML5 - html

Question

I am creating a website for my school coding class using Adobe Dreamweaver, but I have run into an issue.
I have two articles and am trying to get them inline. They are both set to block, and I know that they should be inline-block elements, but setting it to that causes a problem.
I have a navigation bar above these two articles, and if I make these articles inline-block elements, it makes the navigation bar disappear. I don't know why this is happening, and have tried asking my teacher and classmates for help, but can't find a solution. Here is an image of what it looks like with both articles as block elements:
This is what it looks like when they are inline-block elements:
I want the articles to be together, as shown in the second image, but I still want to keep my navigation bar. Note that the navigation bar is styled with 'position:fixed', so that it always stays at the top of my page. I also want to keep this, but I feel as though it may be the cause for my problem. Here is a snippet of the code which I made (sorry if it doesn't work properly, and that the images don't work)
#import url('https://fonts.googleapis.com/css2?family=Limelight&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap');
nav {
height: 120px;
background-color: black;
width: 100%;
display: block;
margin: -130px 0 0 -10px;
position: fixed;
}
.dropdown {
padding-right: 5px;
margin-right: 5px;
}
.tasa {
text-transform: uppercase;
font-family: 'Limelight', cursive;
}
.nav-bar-image {
width: 110px;
height: 100px;
margin: 10px -10px 10px 10px;
display: inline;
}
nav>ul>li>a {
text-decoration: none;
color: white;
}
nav>ul>li {
font-size: 20px;
font-family: Zen Dots;
display: inline;
padding: 10px;
}
nav>ul>li:hover {
background-color: darkgrey;
}
nav>ul>li>ul {
display: none;
margin-top: 10px;
font-size: 14px;
margin-left: 165px;
list-style-type: none;
position: absolute;
}
nav>ul>li:hover>ul {
display: block;
}
nav>ul>li>ul>li {
padding-left: 10px;
padding-right: 69.5px;
}
nav>ul>li>ul>li:hover {
background-color: darkgrey;
}
nav>ul>li>ul>li>a {
color: white;
text-decoration: none;
}
nav>ul {
display: inline-block;
vertical-align: top;
margin-top: 20px;
list-style-type: none;
}
body {
background-image: url(background.jpg);
}
article {
background-color: rgba(255, 231, 179, 0.80);
width: 400px;
margin: 130px 0 0 10px;
/*130px 0 0 10px*/
padding: 5px 10px 10px;
height: 200px;
text-align: justify;
height: 750px;
display: block;
verticle-align: top;
}
.left {
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
height: 200px;
}
.centre {
margin-top: 0;
height: 200px;
}
h1 {
color: white;
font-family: Limelight;
font-size: 40px;
text-align: center;
margin: 10px 0 0;
}
p {
text-align: jusify;
color: white;
}
article>ul>li>a {
color: white;
text-decoration: none;
}
article>ul {
list-style-type: none;
}
::-webkit-scrollbar {
width: 16px;
}
::-webkit-scrollbar-thumb {
background: #ffe7b3;
border-radius: 8px;
}
::-webkit-scrollbar-track {
background: #ffffff;
box-shadow: inset 0 0 5px grey;
border-radius: 8px;
}
/*
::-webkit-scrollbar-button:single-button {
background-color: #ffffff;
display: block;
border-style: solid;
height: 13px;
width: 16px;
}
*/
::-webkit-scrollbar-thumb:hover {
background: #d6c39a;
}
/*
::-webkit-scrollbar-button:single-button:vertical:decrement {
border-width: 0 8px 8px 8px;
border-color: transparent transparent #000000 transparent;
}
::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
border-color: transparent transparent #5e5e5e transparent;
}
::-webkit-scrollbar-button:single-button:vertical:increment {
border-width: 8px 8px 0 8px;
border-color: #000000 transparent transparent transparent;
}
::-webkit-scrollbar-button:vertical:single-button:increment:hover {
border-color: #5e5e5e transparent transparent transparent;
}
*/
html {
cursor: url(tasa-cursor-medium.cur), default;
}
a {
cursor: url(tasa-cursor-a-large.cur), default;
}
<header>
<nav>
<img src="logo.jpg" alt="TASA logo." class="nav-bar-image">
<ul>
<li>Home</li>
<li>Details</li>
<li class="dropdown">Presentations
<ul>
<li>Introduction</li>
<li>Constellations</li>
<li>Lunar Events</li>
</ul>
</li>
<li>Links</li>
</ul>
</nav>
</header>
<article class="left">
<h1>TASA</h1>
<p>
</p>
</article>
<article class=centre>
<h1>Images</h1>
</article>
This snippet has the display element on the articles set to block, not inline-block.

Answer 1

The problem: when you make the class left and centre inline-block, the margin-top of the nav is -130px. This makes it go out of screen.
A more clean solution would be to use flex box, and have some flexibility ;) of the alignment of items. In the solution, i removed the margin and changed it, see below:
/* Wrap the class "left" and "centre" with a div (i named it "main_content") */
.main_content {
display: flex;
flex-direction: row;
}
nav {
/* Removed this -> margin: -130px 0 0 -10px; */
position: fixed;
}
.centre {
/* Removed this --> margin-top: 0; */
}
nav>ul {
/* Changed margin-top from 20px to 0px */
margin-top: 0px;
}
#import url('https://fonts.googleapis.com/css2?family=Limelight&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap');
nav {
height: 120px;
background-color: black;
width: 100%;
display: block;
position: fixed;
}
.dropdown {
padding-right: 5px;
margin-right: 5px;
}
.tasa {
text-transform: uppercase;
font-family: 'Limelight', cursive;
}
.nav-bar-image {
width: 110px;
height: 100px;
margin: 10px -10px 10px 10px;
display: inline;
}
nav>ul>li>a {
text-decoration: none;
color: white;
}
nav>ul>li {
font-size: 20px;
font-family: Zen Dots;
display: inline;
padding: 10px;
}
nav>ul>li:hover {
background-color: darkgrey;
}
nav>ul>li>ul {
display: none;
margin-top: 10px;
font-size: 14px;
margin-left: 165px;
list-style-type: none;
position: absolute;
}
nav>ul>li:hover>ul {
display: block;
}
nav>ul>li>ul>li {
padding-left: 10px;
padding-right: 69.5px;
}
nav>ul>li>ul>li:hover {
background-color: darkgrey;
}
nav>ul>li>ul>li>a {
color: white;
text-decoration: none;
}
nav>ul {
display: inline-block;
vertical-align: top;
margin-top: 0px;
list-style-type: none;
}
body {
background-image: url(background.jpg);
}
article {
background-color: rgba(255, 231, 179, 0.80);
width: 400px;
margin: 130px 0 0 10px;
/*130px 0 0 10px*/
padding: 5px 10px 10px;
height: 200px;
text-align: justify;
height: 750px;
display: block;
vertical-align: top;
}
.main_content {
display: flex;
flex-direction: row;
}
.left {
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
height: 200px;
}
.centre {
height: 200px;
}
h1 {
color: white;
font-family: Limelight;
font-size: 40px;
text-align: center;
margin: 10px 0 0;
}
p {
text-align: jusify;
color: white;
}
article>ul>li>a {
color: white;
text-decoration: none;
}
article>ul {
list-style-type: none;
}
::-webkit-scrollbar {
width: 16px;
}
::-webkit-scrollbar-thumb {
background: #ffe7b3;
border-radius: 8px;
}
::-webkit-scrollbar-track {
background: #ffffff;
box-shadow: inset 0 0 5px grey;
border-radius: 8px;
}
/*
::-webkit-scrollbar-button:single-button {
background-color: #ffffff;
display: block;
border-style: solid;
height: 13px;
width: 16px;
}
*/
::-webkit-scrollbar-thumb:hover {
background: #d6c39a;
}
/*
::-webkit-scrollbar-button:single-button:vertical:decrement {
border-width: 0 8px 8px 8px;
border-color: transparent transparent #000000 transparent;
}
::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
border-color: transparent transparent #5e5e5e transparent;
}
::-webkit-scrollbar-button:single-button:vertical:increment {
border-width: 8px 8px 0 8px;
border-color: #000000 transparent transparent transparent;
}
::-webkit-scrollbar-button:vertical:single-button:increment:hover {
border-color: #5e5e5e transparent transparent transparent;
}
*/
html {
cursor: url(tasa-cursor-medium.cur), default;
}
a {
cursor: url(tasa-cursor-a-large.cur), default;
}
<header>
<nav>
<img src="logo.jpg" alt="TASA logo." class="nav-bar-image">
<ul>
<li>Home</li>
<li>Details</li>
<li class="dropdown">Presentations
<ul>
<li>Introduction</li>
<li>Constellations</li>
<li>Lunar Events</li>
</ul>
</li>
<li>Links</li>
</ul>
</nav>
</header>
<div class="main_content">
<article class="left">
<h1>TASA</h1>
<p>
</p>
</article>
<article class="centre">
<h1>Images</h1>
</article>
</div>