Try the display: flex; and margin: auto; command
Solution 1 :
Solution 2 :
I think your css is really complicated, i suggest you make it simple, modding your footer adding some divs for segmentation, and using some sugestions from this answer: side by side 3 divs question
i test the most simple answer in this snippet:
*{
box-sizing: border-box;
}
.row{
width: 100%;
}
header{
width: 100%;
height: 80px;
}
header p{
text-align: center;
text-decoration: black ;
font-weight: 1000;
font-size: 20px;
margin-top: 0 auto;
display: block;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
header nav ul{
display: block;
margin: 0 auto 0;
width: fit-content;
}
header nav ul li a{
text-decoration: none;
color: black;
margin-top: 0%;
padding:0 25px 25px 0;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
header nav ul li{
list-style:none;
display:inline-block;
float:left;
}
main #banner{
width: 100%;
background-color:lavender ;
background-image: url("h.jpg");
height:600px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main h2{
text-align: center;
font-weight: 600;
margin: 0%;
text-shadow:2px 2px 5px ;
color: blue;
padding-top:10px ;
font-size: 50px;
font-weight: bold;
}
main p{
text-align: center;
overflow: hidden;
font-size: 30px;
font-style: italic;
color: blue;
}
main #mainn{
height: 400px;
}
main .buttons{
background-color: grey;
text-align: center;
line-height:100px;
margin: 10px 0 0 0;
color: black;
font-weight: bold;
box-shadow:0 3px 3px 0 gainsboro;
}
footer{
width: calc(100%-80px);
overflow: hidden;
background-color: grey;
padding: 40px 40px;
margin-top: 20%;
}
/*footer ul {
color: white;
width: fit-content;
list-style:none;
}
footer ul li{
display: block;
list-style: none;
}
footer ul li a{
text-decoration: none;
line-height:50px;
color: white;
}
footer #second{
display: none;
}
footer div {
width: 60px;
display: block;
padding: 2em;
margin-left: 20%;
float: right;
}
footer div img{
display: block;
width: 40px;
margin-bottom: 10px;
}*/
.container {
display: flex;
}
.container > div {
flex: 1; /*grow*/
}
/**Desktop**/
@media (min-width: 992px) {
.col-lg-1{
float: left;
}
.col-lg-1 {
width: 33.33%;
}
}
/**Taplets**/
@media (min-width: 768px) and (max-width: 991px) {
.col-md-1{
float: left;
}
.col-md-1 {
width: 50%;
}
}
/**Mobile**/
@media (max-width: 767) {
.col-sm-1{
float: left;
}
.col-sm-1 {
width: 100%;
}
} <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FirstProject</title>
</head>
<body>
<header class="row" >
<p>FirstProject</p>
<nav>
<ul>
<li>
<a href="ass.html">Home</a>
</li>
<li>
<a href="seccond.html">Contact us</a>
</li>
<li>
<a href="first.html">About</a>
</li>
</ul>
</nav>
</header>
<main>
<section id="banner">
<h2>
IAM A STRONG WEB DEVELOPER <br>WITH ALOT OF SKILLS
</h2>
<p>
jasdslfsdjnksknglkgrlerkgne<br>kgnekgneklgnlkgnelkgneklgnkgsfmf<br>slfmsfgfgrgsrtytyyuoukjfbd
</p>
</section>
<section id="mainn">
<p class="buttons"> Cases </p>
<p class="buttons"> Portfolio </p>
<p class="buttons"> youtube </p>
<p class="buttons"> behance </p>
</section>
</main>
<footer>
<div class="container">
<div>
<ul id="first">
<li>
<a href="ass.html">Home</a>
</li>
<li >
<a href="seccond.html">Contact us</a>
</li>
<li>
<a href="first.html">About</a>
</li>
</ul>
</div>
<div>
<ul id="second">
<li>
<a href="ass.html">Home</a>
</li>
<li>
<a href="seccond.html">Contact us</a>
</li>
<li>
<a href="first.html">About</a>
</li>
</ul>
</div>
<div>
<a href="https://www.facebook.com/">
<img src="ab.png">
</a>
<a href="https://www.youtube.com/">
<img src="bc.png">
</a>
<a href="https://translate.google.com/?">
<img src="cd.png">
</a>
</div>
</div>
</footer>
</body>
</html>Problem :
I’m trying to do a list next to it an image that links to other sites but it displays below it and I don’t know why even though. I used float right but still appears below it I strange way as it is having width or something that prevent it from display right to it, so any help. I’m new in front end world.
* {
box-sizing: border-box;
}
.row {
width: 100%;
}
header {
width: 100%;
height: 80px;
}
header p {
text-align: center;
text-decoration: black;
font-weight: 1000;
font-size: 20px;
margin-top: 0 auto;
display: block;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
header nav ul {
display: block;
margin: 0 auto 0;
width: fit-content;
}
header nav ul li a {
text-decoration: none;
color: black;
margin-top: 0%;
padding: 0 25px 25px 0;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
header nav ul li {
list-style: none;
display: inline-block;
float: left;
}
main #banner {
width: 100%;
background-color: lavender;
background-image: url("h.jpg");
height: 600px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main h2 {
text-align: center;
font-weight: 600;
margin: 0%;
text-shadow: 2px 2px 5px;
color: blue;
padding-top: 10px;
font-size: 50px;
font-weight: bold;
}
main p {
text-align: center;
overflow: hidden;
font-size: 30px;
font-style: italic;
color: blue;
}
main #mainn {
height: 400px;
}
main .buttons {
background-color: grey;
text-align: center;
line-height: 100px;
margin: 10px 0 0 0;
color: black;
font-weight: bold;
box-shadow: 0 3px 3px 0 gainsboro;
}
footer {
width: calc(100%-80px);
overflow: hidden;
background-color: grey;
padding: 40px 40px;
margin-top: 20%;
}
footer ul {
color: white;
width: fit-content;
list-style: none;
}
footer ul li {
display: block;
list-style: none;
}
footer ul li a {
text-decoration: none;
line-height: 50px;
color: white;
}
footer #second {
display: none;
}
footer div {
width: 60px;
display: block;
padding: 2em;
margin-left: 20%;
float: right;
}
footer div img {
display: block;
width: 40px;
margin-bottom: 10px;
}
/**Desktop**/
@media (min-width: 992px) {
.col-lg-1 {
float: left;
}
.col-lg-1 {
width: 33.33%;
}
}
/**Taplets**/
@media (min-width: 768px) and (max-width: 991px) {
.col-md-1 {
float: left;
}
.col-md-1 {
width: 50%;
}
}
/**Mobile**/
@media (max-width: 767) {
.col-sm-1 {
float: left;
}
.col-sm-1 {
width: 100%;
}
}<header class="row">
<p>FirstProject</p>
<nav>
<ul>
<li>
<a href="ass.html">Home</a>
</li>
<li>
<a href="seccond.html">Contact us</a>
</li>
<li>
<a href="first.html">About</a>
</li>
</ul>
</nav>
</header>
<main>
<section id="banner">
<h2>
IAM A STRONG WEB DEVELOPER <br>WITH ALOT OF SKILLS
</h2>
<p>
jasdslfsdjnksknglkgrlerkgne<br>kgnekgneklgnlkgnelkgneklgnkgsfmf<br>slfmsfgfgrgsrtytyyuoukjfbd
</p>
</section>
<section id="mainn">
<p class="buttons"> Cases </p>
<p class="buttons"> Portfolio </p>
<p class="buttons"> youtube </p>
<p class="buttons"> behance </p>
</section>
</main>
<footer>
<ul id="first">
<li>
<a href="ass.html">Home</a>
</li>
<li>
<a href="seccond.html">Contact us</a>
</li>
<li>
<a href="first.html">About</a>
</li>
</ul>
<ul id="second">
<li>
<a href="ass.html">Home</a>
</li>
<li>
<a href="seccond.html">Contact us</a>
</li>
<li>
<a href="first.html">About</a>
</li>
</ul>
<div>
<a href="https://www.facebook.com/">
<img src="ab.png">
</a>
<a href="https://www.youtube.com/">
<img src="bc.png">
</a>
<a href="https://translate.google.com/?">
<img src="cd.png">
</a>
</div>
</footer>Reference Image
Comments
Comment posted by ProgrammerH
thankyou, excuse me for complexity I am just a beginner 😀
Comment posted by ProgrammerH
but why did you commented some of the CSS code, it was for handling the spaces and some things like that, does it have something wrong?
Comment posted by Juan Antonio Vilchis
in my opinion, is easy only use the flex container and the result is almost the same with less complexity, but is notting wrong with your styles if you need it.