The class "pull-left" doesn't work, the logo is not being floated to left and the background color of body tag is not visible as well?
Can anyone explain where I am going wrong?
The index.html file and bootstrap files are in the same directory.
I checked the tags as well but could not find a typo.
body {
font-size: 16px;
font-family: font-family: 'Oxygen', sans-serif;
background-color: #61122f;
color: #fff;
}
#header-nav {
background-color: #f6b319;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('https://scontent-sea1-1.cdninstagram.com/t51.2885-19/s150x150/17437826_285820131856427_2792512281873743872_a.jpg') no-repeat;
width: 150px;
height: 150px;
margin: 10px 15px 10px 0;
}
.navbar-brand {
padding: 25px;
}
.navbar-brand h1 {
font-family: 'Lora', serif;
color: #557c3e;
font-size: 1.5em;
text-transform: uppercase;
font-weight: bold;
text-shadow: 1px 1px 1px #222;
margin-top: 0;
margin-bottom: 0;
line-height: 0.75;
}
.navbar-brand a:hover,
.navbar-brand a:focus {
text-decoration: none;
}
.navbar-brand p {
color: #000;
text-transform: uppercase;
font-size: .7em;
margin-top: 15px;
}
.navbar-brand p span {
vertical-align: middle;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>David Chu's China Bistro</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700" rel="stylesheet" type="text.css">
<link href="https://fonts.googleapis.com/css?family=Lora:400,700" rel="stylesheet" type="text/css">
</head>
<body>
<p></p>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="pull-left">
<div id="logo-img" alt="Logo image"></div>
</a>
<div class="navbar-brand">
<a href="index.html">
<h1>David Chu's China Bistro</h1>
</a>
<p>
<img src="https://www.davidchuschinabistro.com/images/star-k-logo.png" alt="Kosher Certification">
<span>Kosher Certified</span>
</p>
</div>
</div>
</div>
</nav>
</header>
<h1></h1>
<!-- jQuery (bootstrap JS plugins depend on it) -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
In bootstrap 4 pull-right, pull-left are changed with float-right, float-left.
Also your bootstrap css file conflict to other reboot.scss file that's you can't see your background color.
You can use css properties like this to resolve conflict:
body {
font-size: 16px !importnat;
font-family: 'Oxygen', sans-serif !importnat;
background-color: #61122f !importnat;
color: #fff !importnat;
}
There's the html tag where I changed pull-left class with float-left
<a href="index.html" class="float-left">
<div id="logo-img" alt="Logo image"></div>
</a>
I hope it'll helps you
In bootstrap 4 pull-right, pull-left are changed to pull-sm-right
That is, pull-sm/xs/md/lg-left/none/right
Body background colour must have been applied.... It's just not visible because of height may be.. just check by specifying with a significantly larger height of body
Related
My button is in line with the flex-box,
Elements should be stacked on top of one another in a column, right?
I am making a timer, so there is a row, in which there are two columns.
In one column there is an image and in the other, there is a heading, a flexbox(which contains four rectangles), and a button.
Now, I want my button to be below my timer, but it is in line with it.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stiks</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="../css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container hero">
<div class="row">
<div class="portal col-md-12 col-lg-5">
<img class="img-fluid" src="../assets/download (10).jpg">
</div>
<div class="col-md-12 col-lg-7 align-self-center">
<h2><b>Timer</b></h2>
<div class="d-inline-flex flex-nowrap">
<div class="rect">
<span class="days"></span>
<p>Days</p>
</div>
<div class="rect">
<span class="hours"></span>
<p>Hours</p>
</div>
<div class="rect">
<span class="minutes"></span>
<p>Minutes</p>
</div>
<div class="rect">
<span class="seconds"></span>
<p>Seconds</p>
</div>
</div>
<button class="btn-main" type="button">Start</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
CSS
:root{
--yellow: #fff189;
--grey: #444444;
--off-white: #e6e6e6;
--blue: #047db1;
--pink: #6b093d;
--green: #ccf0a9;
--black: #000000;
}
h1{
font-size: 4.2em;
}
h2{
font-size: 1.75em;
}
*{
font-family: 'Poppins', sans-serif;
}
.section{
padding-right: 5vw;
padding-left: 5vw;
padding-bottom: 3em;
padding-top: 3em;
}
/*------------------------------------hero section------------------------------------*/
.hero{
min-height: 100vh;
background-color: var(--yellow);
}
.timer{
margin-bottom: 1em;
}
.rect{
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-right: 0.5em;
padding: 0.2em;
border-radius: 0.5em;
text-align: center;
color: var(--off-white);
background-color: var(--blue);
height: 6.5em;
width: 8em;
min-width: 0;
}
.rect h1{
font-size: 2.25em;
font-weight: 700;
}
.btn-main{
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
border-style: none;
font-size: 1.1em;
border-radius: 00.5em;
background-color: var(--pink);
color: var(--off-white);
padding-top: 0.6em;
padding-bottom: 0.6em;
padding-right: 1.8em;
padding-left: 1.8em;
}
.btn-main:hover{
background-color: var(--grey);
}
Add display: block; css in .btn-main class.
visit : https://jsfiddle.net/ktv1frwu/
I tested your code according to browser's width it changes to inline and sometime below those boxes.
Fix it by adding
display : block in your .btn-main class
.btn-main{
display:block;
}
I have started with a website, which uses border-radius in css. But not working as per requirement. It is getting curved on top-left and bottom-left but not on top-right and bottom-right. I have also tried specific border-top-right-radius: but still is not working.
body {
font-size: 16px;
color: #fff;
background-color: #61122f;
font-family: 'Oxygen', sans-serif;
}
/*** HEADER ***/
#header-nav {
background-color: #f6b319;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('https://via.placeholder.com/150') no-repeat;
border-radius: 60px;
width: 150 px;
height: 150px;
margin: 10px 15px 10px 5px;
border-collapse: inherit;
}
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Oxygen:wght#300;400;700&display=swap" rel="stylesheet">
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="">
<div id="logo-img" alt="Logo image"></div>
</a>
</div>
</div>
</nav>
</header>
The width should have no spaces between the value and the units, otherwise it is width 100% which is the default one for a block element as div is.
Even though you only distinguish the part with the background at first sight but if you use your browser's inspector tools you can check it.
body {
font-size: 16px;
color: #fff;
background-color: #61122f;
font-family: 'Oxygen', sans-serif;
}
/*** HEADER ***/
#header-nav {
background-color: #f6b319;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('https://via.placeholder.com/150') no-repeat;
border-radius: 60px;
width: 150px;
height: 150px;
margin: 10px 15px 10px 5px;
border-collapse: inherit;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Big Bite</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Oxygen:wght#300;400;700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="">
<div id="logo-img" alt="Logo image"></div>
</a>
</div>
</div>
</nav>
</header>
<!-- jQuery (Bootstrap JS plugins depend on it) -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
I am unsure on how to place the image in correct location. I am using a bootstrap custom blog template, and I am trying to slightly modify it to make it look the way I want.
I want to place a image in the location of the blue rectangle on the left side as shown in picture bellow. Here I have tried couple of different things, but my images keeps rendering right under the blog title "The Bootstrap Blog", which is not what I want. I have tried using
class="col-sm-offset-1"
But the more I increase the offset, this just moves the image to the right of the screen. I can't get it to go far left. How can i accomplish this, without losing the bootstrap auto scaling for different screen sizes?
Here is my base.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
{% load staticfiles %}
<title>Blog Title</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Global blog css for custom defined parameters -->
<link href="{% static 'css/blog.css' %}" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="{% url 'blog:index' %}">Home</a>
<a class="blog-nav-item" href="{% url 'about:index' %}">About</a>
</nav>
</div>
</div>
<div class="container">
<div class="blog-header">
<h1 class="blog-title">Code'N Cofee Blog</h1>
<p class="lead blog-description">Live and write code. </p>
</div>
<!-- place image on page -->
<div class="row">
<div class="col-sm-4 col-sm-offset-1">
<img src="{% static 'media/Pic3.jpg' %}" alt="" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-sm-8 blog-main">
<!-- blog post goes here -->
{% block content %}
{% endblock %}
<nav>
<ul class="pager">
<li>Previous</li>
<li>Next</li>
</ul>
</nav>
</div><!-- /.blog-main -->
</div><!-- /.row -->
</div><!-- /.container -->
<footer class="blog-footer">
<p>Blog template built for Bootstrap by #mdo.</p>
<p>
Back to top
</p>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
And here is my blog.css file:
/*
* Globals
*/
body {
font-family: 'Source Sans Pro', Georgia, "Times New Roman", Times, sans-serif;
color: #555;
background-color: ghostwhite;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: 0;
font-family: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
color: #333;
}
/*
* Override Bootstrap's default container.
*/
#media (min-width: 1200px) {
.container {
width: 970px;
}
}
/*
* Masthead for nav
*/
.blog-masthead {
background-color: #428bca;
-webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}
/* Nav links */
.blog-nav-item {
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
color: #cdddeb;
}
.blog-nav-item:hover,
.blog-nav-item:focus {
color: #fff;
text-decoration: none;
}
/* Active state gets a caret at the bottom */
.blog-nav .active {
color: #fff;
}
.blog-nav .active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;
}
/*
* Blog name and description
*/
.blog-header {
padding-top: 20px;
padding-bottom: 20px;
}
.blog-title {
margin-top: 30px;
margin-bottom: 0;
font-size: 60px;
font-weight: normal;
}
.blog-description {
font-size: 20px;
color: #999;
}
/*
* Main column and sidebar layout
*/
.blog-main {
font-size: 18px;
line-height: 1.5;
}
/* Sidebar modules for boxing content */
.sidebar-module {
padding: 15px;
margin: 0 -15px 15px;
}
.sidebar-module-inset {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child {
margin-bottom: 0;
}
/* Pagination */
.pager {
margin-bottom: 60px;
text-align: left;
}
.pager > li > a {
width: 140px;
padding: 10px 20px;
text-align: center;
border-radius: 30px;
}
/*
* Blog posts
*/
.blog-post {
margin-bottom: 60px;
}
.blog-post-title {
margin-bottom: 5px;
font-size: 40px;
}
.blog-post-meta {
margin-bottom: 20px;
color: #999;
}
/*
* Footer
*/
.blog-footer {
padding: 40px 0;
color: #999;
text-align: center;
background-color: #f9f9f9;
border-top: 1px solid #e5e5e5;
}
.blog-footer p:last-child {
margin-bottom: 0;
}
/*
float image to left
*/
.pull-left {
float: left !important;
}
#swoosh {
padding-left: 0;
}
Thank you for your help,
Nermin
The class="col-sm-offset-1" moves the image to the right not to the left. If you increase the no like class="col-sm-offset-2" it will move to the right by 1 column. So, this is not the solution.
You have two option
NO.1
Wrap it inside class="container-fluid" and don't give class="col-sm-offset-1" see the snippet below.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img src="https://static.pexels.com/photos/7720/night-animal-dog-pet.jpg" alt="" class="img-responsive">
</div>
</div>
</div>
</body>
</html>
No.2
Wrap it inside class="container" and add some margin-left according to your wish.
See the example below--
.image {
margin-left:-60px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 image">
<img src="https://static.pexels.com/photos/7720/night-animal-dog-pet.jpg" alt="" class="img-responsive">
</div>
</div>
</div>
</body>
</html>
I've made div with bootstrap class attribute center-block and I want to align it vertically but nothing is working only manually adding margin to the div. Any tips how to accomplish this ?
Css code:
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 642px;
height: 642px;
border: 1px solid white;
}
.menu > p{
width: 300px;
height: 300px;
margin: 10px;
float: left;
color: white;
text-align: center;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<style>
body{
background-image: url(img/landscape1.jpg);
background-size: cover;
}
</style>
<title>Website</title>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Logo</h1>
</div>
<div class="center-block menu">
<p id="">demo1</p>
<p id="">demo2</p>
<p id="">demo3</p>
<p id="">demo4</p>
</div>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
The div with the class center-block cant be vertically aligned because its not inside an element that with a greater height. "container-fluid" doesnt have a height, so it will be as high as its content inside (the center-block div). The same goes for container-fluid's parents (body and html tags). So you need to wrap it in a container that is higher. I've made a pen to illustrate.
http://codepen.io/ugreen/pen/GjBWWZ
The magic part is this guy:
.flex {
display: flex;
align-items: center;
height: 100%;
border: 1px solid red;
}
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 640px;
height: 640px;
}
.menu li > p{
width: 200px;
color: white;
text-align: left;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
ul {
list-style-type: none;
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Text Logo</h1>
</div>
<ul>
<div class="center-block menu">
<li> <p id="1">demo1</p></li>
<li> <p id="2">demo2</p></li>
<li> <p id="3">demo3</p></li>
<li><p id="4">demo4</p><li>
</div>
</ul>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
</body>
</html>
I'm trying to make a navbar for a new project I'm working on.
I want the navbar to have the website title in it, that is the h1 and the menu items, but when I try to do that it doesn't make both the h1 and the ul on the same line.
I want the navbar items and the navbar "header" aligned at the same height and on the same line not as diffrent blocks that can't fit together.
html, body {
width: 100 % ;
padding: 0;
margin: 0;
font - family: 'Roboto',
sans - serif;
}
h1, h2, h3, h4, h5 {
margin: 0;
padding: 0;
}
.main - title {
text - align: center;
margin - top: 20 px;
margin - bottom: 2 px;
}
header {
border - bottom: 2 px solid grey;
}
ul {
padding: 0;
margin: 0;
}
.nav - ul {
list - style - type: none;
float: right;
margin - right: 50 px;
display: inline - block;
}
.navbar - title > h1 {
text - align: center;
margin - top: 20 px;
}
.nav - ul > a: visited, a: link {
text - decoration: none;
color: black;
font - size: 1.5e m
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Raspberry pi projects</title>
<link rel="stylesheet" href="assets/css/main.css">
<!-- JQUERY CDN -->
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.js"></script>
<!-- LOADING SCREEN SCRIPT -->
<!--<script type="text/javascript" src="assets/js/load.js"></script>-->
<!-- ROBOTO FONT -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,900,100italic,300italic,500,300,700,400italic,700italic,500italic,100&subset=latin,greek-ext,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<div>
<div class="nav-brand">
<h1>Raspberry pi projects</h1>
</div>
<div class="nav-list">
<ul class="nav-ul">
<li class="nav-item">
Submit a project
</li>
</ul>
</div>
</div>
</nav>
<script src=""></script>
</body>
</html>
h1 tags are display:block by default, meaning they take up 100% width. You can change this by adding display:inline-block to .nav-brand and .nav-list:
html, body {
width: 100%;
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
h1,h2,h3,h4,h5 {
margin: 0;
padding: 0;
}
.main-title {
text-align: center;
margin-top: 20px;
margin-bottom: 2px;
}
header {
border-bottom: 2px solid grey;
}
ul {
padding: 0;
margin:0;
}
.nav-brand, .nav-list {
display:inline-block;
}
.nav-ul {
list-style-type: none;
float:right;
margin-right: 50px;
display: inline-block;
}
.navbar-title > h1 {
text-align: center;
margin-top: 20px;
}
.nav-ul > a:visited, a:link {
text-decoration: none;
color: black;
font-size: 1.5em
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Raspberry pi projects</title>
<link rel="stylesheet" href="assets/css/main.css">
<!-- JQUERY CDN -->
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.js"></script>
<!-- LOADING SCREEN SCRIPT -->
<!--<script type="text/javascript" src="assets/js/load.js"></script>-->
<!-- ROBOTO FONT -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,900,100italic,300italic,500,300,700,400italic,700italic,500italic,100&subset=latin,greek-ext,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<div>
<div class="nav-brand">
<h1>Raspberry pi projects</h1>
</div>
<div class="nav-list">
<ul class="nav-ul">
<li class="nav-item">
Submit a project
</li>
</ul>
</div>
</div>
</nav>
<script src=""></script>
</body>
</html>