I accidentally put an extra close curly bracket

Question

I am stuck with an extra close curry bracket in CSS that I accidentally put prior writing other lines. If I leave it there, it acually does no harm to the result. However, when I remove it, the position of other elements are repositioned.

(( In lines of code, the extra close curly bracket is where the arrow pointing ))

Please click on the links below to see both results.

Question: Is there any way to remove it without repositioning other elements?

Without the Close Curly Bracket

With the Close Curly Bracket

body{
 font: 15px/1.5 Helvetica, Arial, sans-serif;
 padding: 0;
 margin: 0;
 p(color#282f38);
 background-color: #F5F2ED;
 font:696863;
}

/*Global*/
 .container{
 width:80%;
 margin:auto;
 overflow:hidden;
}

ul{
 margin:0;
 padding:0;
}

/* Header */
 #fixed{
 position: fixed;
}

header{
 position: fixed;
 width: 100%;
 background:#282f38;
 color:#F5F2ED;
 padding-top: 10px;
 min-height:50px;
 border-bottom:#F5F2ED 3px solid;
}

header a{
 color:#F5F2ED;
 text-decoration:none;
 text-transform:uppercase;
 font-size: 18px;
}

header li{
 float:left;
 display: inline;
 padding: 0 20px 0 20px;
}

header #resume{
 float: left;
}

header #resume h1{
 margin: 0;
 padding: 0;
}

header nav{
 position: relative;
 left: 30%;
 float: right;
 margin-top: 10px;
}
header .highlight, header .current a{
 color:#696863 ;
 font-weight: bold;
}

header a:hover{
 color:#696863;
 font-weight: bold;
}

/* Showcase */
 #showcase {
 min-height: 350px;
 background: url('../Resources/Photographer.png') no-repeat 0 -120px;
 align-items: center;
 color: #ffffff;
 overflow: auto;
}

#showcase h1{
 text-align: center;
 margin-top: 100px;
 font-size: 40px;
 margin-bottom: 10px;
}

#showcase p{
 text-align:justify;
 margin:0;
 padding:0;
 font-size: 14;
 text-indent: inherit;
}

/* Social Medias*/

#socialmedias{
 position:fixed;
 padding-top: : 5px;
 right: 20px;
 top: 130px;
 display: block;
 vertical-align: baseline;
 font: inherit;
 list-style-type: none;
}

}    <<-----------------------------------------------------------------------
/* Message Me Box */
#box{
 width: 30%;
 overflow: hidden;
 padding: 1px;
}
/* Box Border */
 .fieldset{
 display: inline-block;
 border: 3px solid;
 float: right;
}
/* Message Me Title */
 #legend{
 font-size: 20px;
 font-weight: bold;
 color:#282f38;
}
/* Name Input */
 #form-name{
 display: block;
 width: 200px;
 margin-bottom: 10px;
}
/* Email Input */
 #form-email{
 display: block;
 width: 200px;
 margin-bottom: 10px;
}
/* Message Input */
 #form-message{
 display: block;
 margin-bottom: 10px;
}
/* Contact */
 .button_contact{
 position: relative;
 height: 30px;
 width: 100%;
 background:#696863;
 color: #F5F2ED;
 font-size: 14px;
 text-transform: uppercase;
 border: 0;
}

Answer 1

The extra curly bracket is being treated as part of the selector for the next rule. i.e. the rule is

} #box {
 width: 30%;
 overflow: hidden;
 padding: 1px;
}

So } #box matches nothing. When you remove the }, the selector is #box and matches the element with id "box".

If you don't want the effect you get when removing the extra }, remove the entire rule.

Answer 2

/* Header */
 ----------------->#fixed{<------------------
 position: fixed;
}

Try to change the id where the arrow is pointed, use class for that, because there are so many conflicts, if we use IDs directly. For more information please find the link below:

https://github.com/CSSLint/csslint/wiki/disallow-ids-in-selectors

Answer 3

You have many errors in your css. I've validated your css on W3C CSS Validator

I've changed your CSS. See below:

body {
	font: 15px/1.5 Helvetica, Arial, sans-serif;
	padding: 0;
	margin: 0;
	background-color: #F5F2ED;
}

p {
	color: #282f38;
}

/*Global*/
.container {
	width: 80%;
	margin: auto;
	overflow: hidden;
}

ul {
	margin: 0;
	padding: 0;
}

/* Header */
#fixed {
	position: fixed;
}

header {
	position: fixed;
	width: 100%;
	background: #282f38;
	color: #F5F2ED;
	padding-top: 10px;
	min-height: 50px;
	border-bottom: #F5F2ED 3px solid;
}

header a {
	color: #F5F2ED;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 18px;
}

header li {
	float: left;
	display: inline;
	padding: 0 20px 0 20px;
}

header #resume {
	float: left;
}

header #resume h1 {
	margin: 0;
	padding: 0;
}

header nav {
	position: relative;
	left: 30%;
	float: right;
	margin-top: 10px;
}

header .highlight, header .current a {
	color: #696863;
	font-weight: bold;
}

header a:hover {
	color: #696863;
	font-weight: bold;
}

/* Showcase */
#showcase {
	min-height: 350px;
	background: url('../Resources/Photographer.png') no-repeat 0 -120px;
	align-items: center;
	color: #ffffff;
	overflow: auto;
}

#showcase h1 {
	text-align: center;
	margin-top: 100px;
	font-size: 40px;
	margin-bottom: 10px;
}

#showcase p {
	text-align: justify;
	margin: 0;
	padding: 0;
	font-size: 14px;
	text-indent: inherit;
}

/* Social Medias*/
#socialmedias {
	position: fixed;
	padding-top: 5px;
	right: 20px;
	top: 130px;
	display: block;
	vertical-align: baseline;
	font: inherit;
	list-style-type: none;
}

/* Message Me Box */
#box {
	width: 30%;
	overflow: hidden;
	padding: 1px;
}
/* Box Border */
.fieldset {
	display: inline-block;
	border: 3px solid;
	float: right;
}
/* Message Me Title */
#legend {
	font-size: 20px;
	font-weight: bold;
	color: #282f38;
}
/* Name Input */
#form-name {
	display: block;
	width: 200px;
	margin-bottom: 10px;
}
/* Email Input */
#form-email {
	display: block;
	width: 200px;
	margin-bottom: 10px;
}
/* Message Input */
#form-message {
	display: block;
	margin-bottom: 10px;
}
/* Contact */
.button_contact {
	position: relative;
	height: 30px;
	width: 100%;
	background: #696863;
	color: #F5F2ED;
	font-size: 14px;
	text-transform: uppercase;
	border: 0;
}

Answer 4

Not just one error,

Check the comments I added in your code.

Best way to avoid these errors are using an IDE. There are so many open source tools available. For example NetBeans.

They can help you to identify your errors. Check this screenshot, they are easy to use also.

/* Social Medias*/

#socialmedias{
 position:fixed;
 padding-top: : 5px; // Error 1, 
 right: 20px;
 top: 130px;
 display: block;
 vertical-align: baseline;
 font: inherit;
 list-style-type: none;
}

}    // Error 2

body{
 font: 15px/1.5 Helvetica, Arial, sans-serif;
 padding: 0;
 margin: 0;
 p(color#282f38);  // Error 3
 background-color: #F5F2ED;
 font:696863;
}

Answer 5

i think there is something to do with "#fixed" id name in the html and css. try to change the name to something else. The property and your name might be colliding with each other. So change it...