Nick Short Nick Short - 1 month ago 10
HTML Question

My CSS Grid is not Working with my HTML

I have been working on a grid system for a practice website for about two weeks now and I still can't figure it out. I have been watching youtube videos and reading articles left and right with no luck. This is what I have come up with thus far:

HTML & CSS



ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #2A2A2A;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
li {
float: right;
text-color: white;
border-left: 1px solid white;
font-family: "Comic Sans MS";
}
li:hover {
background-color: #1D1D1D;
}
li a {
display: block;
padding: 8px;
color: white;
margin: 7px 5px 7px 5px;
}
li a:hover {
background-color: #1D1D1D;
color: white;
text-decoration: none;
}
li:first-child {
background-color: #00E006;
border: none
}
li:first-child:hover {
background-color: #05aa0a;
}
li:first-child a:hover {
background-color: #05aa0a;
}
.fit {
max-width: 100%;
max-height: 100%;
}
.background {
background-color: grey;
}
p {
color: black;
font-family: "Trebuchet MS";
font-size: 16px;
margin: 10px;
}
a:hover {
text-decoration: none;
}
.bigger-text {
font-size: 20px;
}
.profile-img-border {
border: 1px solid black;
border-radius: 50%;
}
.img-border {
border: 3px solid black;
border-radius: 100%;
margin: 5px
}
div.img {
margin: 0 auto;
border: 1px solid #ccc;
float: left;
width: 280px;
display: block;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
background-color: white;
}
.container {
width: 1460px;
margin-right: auto;
margin-left: auto
}
five:first-child,
four:first-child,
three:first-child,
two:first-child,
one:first-child,
six:first-child {
margin-left: 0;
}
.six {
width: 100%;
display: block;
}
.five {
width: 80%;
display: block;
float: left;
margin-left: 2%;
}
.four {
width: 66%;
display: block;
float: left;
margin-left: 2%;
}
.three {
width: 49%;
display: block;
float: left;
margin-left: 2%;
}
.two {
width: 32%;
display: block;
float: left;
margin-left: 2%;
}
.one {
width: 15%;
display: block;
float: left;
margin-left: 2%;
}
.row {
width: 100%;
clear: both;
padding: 0px;
margin: 0px;
}

<body class="background">
<div class="container">
<div class="row">
<div class="top-bar-box align-middle-v" align="right">
<ul>
<li style="float:left">
<a class="active">Home</a>
</li>
<li><a>About</a>
</li>
<li><a>Portfolio</a>
</li>
<li><a>Contact</a>
</li>
</ul>
</div>
</div>
<!--Row 1 closer-->
<div class="row">
<!--Row 2 opener-->
<div class="four">
<p>"text text text"</p>
</div>
<div class="two">
<img src="#" alt="A picture of a verry handsome
fellow(me)" class="profile-img-border"></img>
</div>
</div>
<!--Row 2 closer-->
</div>
</body>





Can anyone help me figure this out? Do I have to add something to the program, or delete some of this code?

Thank you all,
Nick

Answer

you could start by moving this to the end

five:first-child,
four:first-child,
three:first-child,
two:first-child,
one:first-child,
six:first-child {
  margin-left: 0;
}

and replacing it with

.five:first-child,
.four:first-child,
.three:first-child,
.two:first-child,
.one:first-child,
.six:first-child {
  margin-left: 0;
}