CODEWITHSUNDEEP
htmlcsspaddingnavresponsive
robeng
robeng

Reputation: 85

How to remove navbar padding

In school we have an project were we shall create a website that is responsive. We use the system were you give an element an class, like class="col-6 col-m-10". And i have an nav bar with some ul li in them. But, it does not line up with the side. I found out that the navbar has somekind of padding to it.

Here is a photo to understand better:

photo

How to remove the padding so it lines up with the header on top and the screen side on the left? Here is my code:

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: 'Ubuntu', sans-serif;
}
header {
    background-color: #ff9900;
    text-align: center;
    color: black;
    font-size: 30px;
    height: 65px;
}
nav ul {
	overflow: hidden;
	list-style-type: none;
	text-align: center;
}
nav ul li a {
	display: block;
	padding: 20px 10px;
	font-size: 20px;
	text-decoration: none;
    background-color: #ff9900;
    color: black;
}
nav ul li a:hover {
	background-color: #e68a00;
}
nav ul li a:active {
	background-color: #ffa31a;
	color: white;
}







.row::after {
    content: "";
    clear: both;
    display: block;
}

/* For mobile phones: */
[class*="col-"] {
    float: left;
    padding: 15px;
    width: 100%;
}



@media only screen and (min-width: 600px) {

    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {

    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" type="text/css" href="css/mainstil.css">
		<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
	</head>
	<body>
		<header class="col-12 col-m-12">Personuppgiftlagen</header>
	<div clas="row">
		<nav class="col-4 col-m-6">
			<ul>
				<li><a href="#">Personuppgiftslagen</a></li>
				<li><a href="#">Lagen om elektronisk kommunikatio</a></li>
				<li><a href="#">Yttrandefrihetslagen</a></li>
				<li><a href="#">Tryckfrihetsförordningen</a></li>
				<li><a href="#">Etik och integritet</a></li>
			</ul>
		</nav>
		<section class="col-8 col-m-6">
			<img src="img/pul_s.jpg">
		</select>
	</div>



	</body>
</html>

Upvotes: 0

Views: 746

Answers (3)

Naseer
Naseer

Reputation: 31

In your css code under [class*="col-"] change padding: 15 px; to padding: 15px 15px 15px 0px;

Upvotes: 0

Baezid Mostafa
Baezid Mostafa

Reputation: 2728

There is lot's of way you can close that padding. So you said it's a school project. And they gave you all the css. So let's make some useful CSS so that we use them when we need those. Check your HTML nav there you find a extra css nopadding. In your css first 2 are useful css so we use those when we need. Any Question ask me in comment. 

 
/*SOME useful css */
.nopadding{ padding:0 !important;} /*use important because I Overwrite the css in same file.*/
.nomargin{margin:0 !important;}/*use important because I Overwrite the css in same file.*/
/*This is your main CSS*/
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: 'Ubuntu', sans-serif;
}
header {
    background-color: #ff9900;
    text-align: center;
    color: black;
    font-size: 30px;
    height: 65px;
}
nav ul {
	overflow: hidden;
	list-style-type: none;
	text-align: center;
}
nav ul li a {
	display: block;
	padding: 20px 10px;
	font-size: 20px;
	text-decoration: none;
    background-color: #ff9900;
    color: black;
}
nav ul li a:hover {
	background-color: #e68a00;
}
nav ul li a:active {
	background-color: #ffa31a;
	color: white;
}







.row::after {
    content: "";
    clear: both;
    display: block;
}

/* For mobile phones: */
[class*="col-"] {
    float: left;
    padding: 15px;
    width: 100%;
}



@media only screen and (min-width: 600px) {

    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {

    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" type="text/css" href="css/mainstil.css">
		<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
	</head>
	<body>
		<header class="col-12 col-m-12">Personuppgiftlagen</header>
	<div clas="row">
		<nav class="col-4 col-m-6 nopadding"><!--Here I use our USEFUL CSS nopadding-->
			<ul>
				<li><a href="#">Personuppgiftslagen</a></li>
				<li><a href="#">Lagen om elektronisk kommunikatio</a></li>
				<li><a href="#">Yttrandefrihetslagen</a></li>
				<li><a href="#">Tryckfrihetsförordningen</a></li>
				<li><a href="#">Etik och integritet</a></li>
			</ul>
		</nav>
		<section class="col-8 col-m-6">
			<img src="img/pul_s.jpg">
		</select>
	</div>



	</body>
</html>

Upvotes: 0

Asons
Asons

Reputation: 87191

Change padding on your [class*="col-"] rule to padding: 15px 0

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: 'Ubuntu', sans-serif;
}
header {
    background-color: #ff9900;
    text-align: center;
    color: black;
    font-size: 30px;
    height: 65px;
}
nav ul {
	overflow: hidden;
	list-style-type: none;
	text-align: center;
}
nav ul li a {
	display: block;
	padding: 20px 10px;
	font-size: 20px;
	text-decoration: none;
    background-color: #ff9900;
    color: black;
}
nav ul li a:hover {
	background-color: #e68a00;
}
nav ul li a:active {
	background-color: #ffa31a;
	color: white;
}


.row::after {
    content: "";
    clear: both;
    display: block;
}

/* For mobile phones: */
[class*="col-"] {
    float: left;
    padding: 15px 0;
    width: 100%;
}



@media only screen and (min-width: 600px) {

    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {

    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" type="text/css" href="css/mainstil.css">
		<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
	</head>
	<body>
		<header class="col-12 col-m-12">Personuppgiftlagen</header>
	<div clas="row">
		<nav class="col-4 col-m-6">
			<ul>
				<li><a href="#">Personuppgiftslagen</a></li>
				<li><a href="#">Lagen om elektronisk kommunikatio</a></li>
				<li><a href="#">Yttrandefrihetslagen</a></li>
				<li><a href="#">Tryckfrihetsförordningen</a></li>
				<li><a href="#">Etik och integritet</a></li>
			</ul>
		</nav>
		<section class="col-8 col-m-6">
			<img src="img/pul_s.jpg">
		</select>
	</div>



	</body>
</html>

Upvotes: 1

Related Questions