Creating a CSS / HTML sidebar - html

Question

I'm a fairly new web developer and I came across a problem (part of it may be a lack of understanding) but I'm having an awful time creating a sidebar with HTML or CSS. My website currently looks as follows:
There isn't much here, but my dilemma is simple: I'd like to create a sidebar. Maybe to put recent updates or other important things. Also, it'd be great to know if I'm going to go into a web development job eventually.
Here is the code:
* {
margin: 0;
padding: 0;
}
body {
background: url("https://s-media-cache-ak0.pinimg.com/originals/ca/5d/a4/ca5da4df54f6fc88531cbfff469043b0.jpg");
background-repeat: no-repeat;
}
.navbar {
width: 100%;
margin-top: 150px;
}
.navbar ul {
text-align: center;
border-top: solid 2px black;
border-left: solid 2px black;
border-right: solid 2px black;
margin-left: 400px;
margin-right: 400px;
background: #444444;
padding-top: 10px;
padding-bottom: 10px;
}
.navbar ul li {
display: inline-block;
}
.navbar ul li a {
text-decoration: none;
color: black;
font-size: 30px;
padding-left: 20px;
padding-right: 20px;
color: white;
transition: 0.3s;
padding-top: 10px;
padding-bottom: 10px;
}
.navbar ul li a:hover {
background: #8c8c8c;
}
.body {
background-color: rgba(158, 158, 158, 0.6);
margin-left: 400px;
margin-right: 400px;
border: solid 2px black;
border
}
.body p {
font-size: 20px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 20px;
margin-right: 20px;
line-height: 30px;
font-weight: 600;
}
<div class="navbar">
<ul>
<li>Home
</li>
<li>My Works
</li>
<li>Contact Me
</li>
</ul>
</div>
<div class="body">
<p>(paragraph related stuff)
</p>
</div>
I'm fairly new to Web Development (and programming entirely, really) but I've looked up multiple questions, tried many things, and nothing seemed to work. I decided to post here myself to see if I can get any solutions?
From what I understand, HTML has elements that go one under another. I've never figured out how to get elements to go side by side. This may also help when adding an image and then text beside it!
Thank you if you are able to help me :)

Answer 1

may be this simple sidebar can help :
http://codepen.io/Axeish/pen/GrEdMx
CSS
`
html {
height: 100%;
}
body {
height: 100%;
background-color: #e2e1e0;
overflow: hidden;
}
a, a:focus, a:active {
text-decoration: none;
-webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}
.card {
border-radius: 2px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
padding: 20px;
background-color: #fff;
margin-bottom: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.center {
width: 400px;
height: 200px;
}
.container {
height: 100%;
margin-left: 400px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow-x: hidden;
overflow-y: auto;
}
.container p {
font-size: 20px;
}
.header {
position: fixed;
left: 0;
top: 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 400px;
z-index: 20;
padding-top: 50px;
padding-bottom: 100px;
background-color: white;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 0 6px rgba(0, 0, 0, 0.23);
}
.header .content .logo {
padding: 10px 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.header .content .logo span {
text-transform: uppercase;
text-decoration: none;
font-size: 27px;
font-weight: 200;
color: #212121;
}
.header .content .logo img {
width: 50px;
height: 50px;
margin-right: 10px;
}
.header .content ul.navigation {
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: distribute;
justify-content: space-around;
padding: 0;
}
.header .content ul.navigation li {
padding: 10px;
cursor: pointer;
-webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}
.header .content ul.navigation li a {
color: #212121;
}
.header .content ul.navigation li a.active {
text-decoration: underline;
}
.header .content ul.navigation li:hover a {
background-color: #212121;
color: white;
}
`

Answer 2

Check this out.
*, :before, :after {
box-sizing: border-box;
}
body {
background: url("https://s-media-cache-ak0.pinimg.com/originals/ca/5d/a4/ca5da4df54f6fc88531cbfff469043b0.jpg");
background-repeat: no-repeat;
}
.unstyled {
list-style: none;
padding: 0;
margin: 0;
}
.unstyled a {
text-decoration: none;
}
.list-inline {
overflow: hidden;
}
.list-inline li {
float: left;
}
.header {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 17.5em;
background: #D13513;
}
.logo {
font: 300 2em "Source Sans Pro", Helvetica, Arial, sans-serif;
text-align: center;
padding: 0;
margin: 0;
}
.logo a {
display: block;
padding: 1em 0;
color: #DFDBD9;
text-decoration: none;
transition: .15s linear color;
}
.main-nav ul {
border-top: solid 1px #3C3735;
}
.main-nav li {
border-bottom: solid 1px #3C3735;
}
.main-nav a {
padding: 1.1em 0;
color: #DFDBD9;
font: 400 1.125em "Source Sans Pro", Helvetica, Arial, sans-serif;
text-align: center;
}
.main-nav a:hover {
color: #fff;
}
.list-hover-slide li {
position: relative;
overflow: hidden;
}
.list-hover-slide a {
display: block;
position: relative;
z-index: 1;
transition: .35s ease color;
}
.list-hover-slide a:before {
content: '';
display: block;
z-index: -1;
position: absolute;
left: -100%;
top: 0;
width: 100%;
height: 100%;
border-right: solid 5px #DF4500;
background: #3C3735;
transition: .35s ease left;
}
.list-hover-slide a.is-current:before, .list-hover-slide a:hover:before {
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet"/>
<body>
<header class="header" role="banner">
<h1 class="logo">
SideNav
</h1>
<div class="nav-wrap">
<nav class="main-nav" role="navigation">
<ul class="unstyled list-hover-slide">
<li>Home</li>
<li>My Work</li>
<li>Contact Me</li>
</ul>
</nav>
<script