I am facing an issue where the "New post" and "Log out" buttons on my blog website are displaying on the left side of the header under "All posts" instead of the right side. You can see a screenshot of my project here.
Here is the snippet from my "application.html.erb" file:
<!DOCTYPE html>
<html>
<head>
<title>Blog</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'application' , 'http://fonts.googleapis.com/css?family=Raleway:400,700' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<div id="sidebar">
<div id="logo">
<%= link_to root_path do%>
<%= image_tag "logo.svg" %>
<% end %>
</div>
<ul>
<li class="category">Website</li>
<li><%= link_to "Blog", root_path %></li>
<li>About</li>
</ul>
<ul>
<li class="category">Social</li>
<li><a href="">Facebook</a></li>
<li><a href="">GitHub</a></li>
<li><a href="">Gmail</a></li>
</ul>
<p class="sign_in">Admin Login</p>
</div>
</div>
<div id="main_content">
<div id="header">
<p>All posts</p>
<div class="bottons">
<button class="button"><%= link_to "New Post", new_post_path %>
</button>
<button class="button">Log Out</button>
</div>
</div>
<% flash.each do |name, msg| %>
<%= content_tag(:div, msg, class: "alert") %>
<% end %>
<%= yield %>
</div>
</body>
</html>
And here is the content from my "application.css.scss" file:
@import 'normalize';
html, body {
font-family: 'Raleway', sans-serif;
<!-- More CSS code follows -->
I kindly request assistance in moving these buttons to the right side of the header. Thank you!