Two hours later and still don't see a problem

HTML-CSS
1

Hi,
My name is Daniel and I’m new here :slight_smile:
I’ve been working for a while with HTML and CSS and want to improve much more.
I’m working on my exercise but have a problem.
Set HTML code and link CSS to it. CSS works cause body{} makes changes on my site but when I want to style .container class - nothing happens, no changes.

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Bugiel systems</title>
	<link rel="stylesheet" type="text/css" href="../interactive_page/style1.css">
	<meta charset="utf-8">
	<!-- charset -->
	<meta name="viewport" content="width=device-width">
	<!-- set the best width depending on what kind of device user is using-->
	<meta name="description" content="HTML + CSS + JS builds">
	<!-- description -->
	<meta name="keywords" content="html, css, javascript, js, webpage, web, design, interactive">
	<!-- keywords -->
	<meta name="author" content="Daniel Bugiel">
	<!-- info about Author, but it's not neccesary-->
</head>
<body>

<header>
	<div class="container">
			<div id="branding">
				<h1>Bugiel Systems Web Design</h1>
			</div>
				<nav>
					<ul>
							<li><a href="index.html">Home</a></li>
							<li><a href="about.html">About Me</a></li>
							<li><a href="services.html">Services</a></li>
					</ul>
				</nav>
		</div> <!-- container div ends here -->
</header>


<section id="showcase">
		<div class="container">
			<h1>The best web design services in Poland</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		</div> <!-- container div ends here -->
</section>


<section id="newsletter">
<div class="container">
		<h1>Subscribe to my newsletter</h1>
			<form>
			<input type="email" placeholder="Your email here">
			<button type="submit" class=""="button1">Subscribe</button>
			</form>
</div> <!-- container div ends here -->
</section>


<section id="boxes">
<div class="container">
		<div class="box">
			<img src="../images/logo_html.png" alt="HTML logo">
			<h3>HTML5 Markup</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
		</div>
					<div class="box">
						<img src="../images/logo_css.png" alt="CSS logo">
						<h3>CSS styling</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
					</div>
		<div class="box">
			<img src="../images/logo_js.png" alt="Javascript logo">
			<h3>Javascript</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
		</div>
</div> <!-- container div ends here -->
</section>


<footer>
		<p>Bugiel Systems Web Desing, Copyright &copy 2019</p>
</footer>


</body>
</html>


body{

    font-family: arial, helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    /* font:15px/1.5 arial, helvetica, sans-serif; >> shortcut the 3 syntaxes above */
    padding: 0;
    margin: 0;
    background-color: #f4f4f4;

  }

/* Global */
.container {

width:80%;
margin: auto;
overflow: hidden;


}
1 Like
2

Hi @dannyb welcome :smiley:
Next time try to present this as a Pen, it’s easier for everyone to just tweak around.

I’ve tried here https://codepen.io/pen/?editors=1100 and seems fine. Width changes the size of the container without a problem for example.

3

What do you mean “Pen” ?

With this section, content should be centered but it’s not. Still stick to the left border. :
.container{
width: 80%;
margin:auto;
overflow: hidden;

4

hi @dannyb , your css works fine, the container is centered in the body.
Take a look testHtml
But now if you wanna center elements in the container you have to add additionals css attributes.
for exemple flexbox. with it its easy to center elemnts…
Take a look flexbox

1 Like
5

I need one more coffee definitely :thinking: Thanks a lot @fredydev !

6

Codepen :slight_smile: https://codepen.io

1 Like