Alexandra A Alexandra A - 24 days ago 9
CSS Question

How to make button icons align to right

enter image description hereI can't seem to find a way to make my button icons align to the very right of my header, while keeping "About" "Gallery" and "Resume" to the left.

As well, does anyone know how I can make the text fit evenly on the page, I have a strange gap on the right and want it to fit evenly on the page. It looks like I need help with CSS.

HTML

body {
background-image: url("images/robot.jpg");
background-position: bottom-left;
margin-right: 200px;
text-align: justify;
width: 800px;
height: 400px;
text-decoration: none;
color: white;
font-family: 'Marvel', sans-serif;
}

ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: right;
padding: 10px 13px;
text-decoration: none;
}

li a:hover {
background-color: #111;
}

.circular--portrait {
margin-top: 70px;
margin-left: 30px;
width: 200px;
height: 200px;
float: left;
overflow: hidden;
border-radius: 50%;
}

.circular--portrait img {
width: 100%;
}

.circular--portrait {
width: 25%;
float: left;
}

.column-one p {
width: 65%;
float: right;
margin-top: 150px;
margin-left: 10px;
}

.column-two {
float: left;
width: 100%;
}

img {
transition: transform .5s;
}

img:hover {
transform: scale(1.75);
}



<body>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="resume.html">Resume</a></li>

<li>
<a href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on
Deviant Art" target="_blank">
<img src="images/icons/deviantart.png" width="30" height="30"></a>
</li>
<li>
<a href="eddie.ark.munoz@gmail.com" title="Contact" target="_blank">
<img src="images/icons/email.png" width="30" height="30"></a>
</li>
<li>
<a href="https://www.linkedin.com/in/eddie-munoz-351a9428/"
title="Follow on Linkedin" target="_blank">
<img src="images/icons/linkedin.png" width="30" height="30"></a>
</li>
<li>
<a href="https://www.instagram.com/eddiearkmunoz/" title="Follow on
Instagram" target="_blank">
<img src="images/icons/instagram.png" width="30" height="30">
</a>
</li>
</ul>



<div class="circular--portrait">
<img src="images/profile.jpg">
</div>

<div class="column-one">
<p>Eddie Munoz has been creating art from the age of 13. While he was
completing his Bachelors of Applied Science in Human Relations he was
freelancing on the side. Eddie has created numerous character artists.</p>
</div>



<div class="column-two">
<h1>What others are saying</h1>
<p>"Eddie is the best young talent I have had the pleasure to work with.
He has a great eye for detail and really finds the fun in whatever
project he is given no matter the size. Eddie strives to learn every
nuance of 3D gaming tech as well as distributing
that knowledge once learned. Eddie is an amazing talent that is bound
for superstar status." - Billy Ashlswede, Art Lead at Riot Games</p>
<p>"Eddie was a highly valued Character Artist with proficiency in many
different modeling programs. He was a very dedicated artist who
frequently helped others and went out of his way to produce additional
assets for our game. Eddie has not only a very
technical, but also a very artistic mindset. All of these qualities
make Eddie a great asset to any team." -Kyle Sarvas, Game Artist/Game
Designer</p>
</div>
</body>

Answer Source

I have made many changes to the structure. First, consider placing your header and content inside separate containers. This will give you greater control over each block. In the header, I separated the links <ul> from the icons <ul> and position the icons right using position:absolute.

Now, in the content, you must remember to clear any floats defined previously with clear:both. Here, I used a css grid layout to create two columns but you can opt for any number of other layout strategies.

body {
  background-image: url("images/robot.jpg");
  text-align: justify;
  text-decoration: none;
  font-family: 'Marvel', sans-serif;
  margin: 0px;
  padding: 0px;
}

.header {
  background-color: #333;
}

ul.icons {
  position: absolute;
  right: 0px;
}

ul.links {
  height: 50px;
}

ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  top: 0;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: right;
  padding: 10px 13px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.content {
  clear: both;
  padding: 8px;
  display: grid;
  grid-template-columns: 48% 48%;
  grid-column-gap: 4%;
}

.circular--portrait {
  margin-top: 70px;
  margin-left: 30px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.circular--portrait img {
  width: 100%;
}

.circular--portrait {
  width: 25%;
}

.column-one p {}

.column-two {}

img {
  transition: transform .5s;
}

img:hover {
  transform: scale(1.75);
}
<div class="header">
  <ul class="links">
    <li><a href="about.html">About</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="resume.html">Resume</a></li>
  </ul>

  <ul class="icons">
    <li>
      <a href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank">
        <img src="images/icons/deviantart.png" width="30" height="30"></a>
    </li>
    <li>
      <a href="eddie.ark.munoz@gmail.com" title="Contact" target="_blank">
        <img src="images/icons/email.png" width="30" height="30"></a>
    </li>
    <li>
      <a href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank">
        <img src="images/icons/linkedin.png" width="30" height="30"></a>
    </li>
    <li>
      <a href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank">
        <img src="images/icons/instagram.png" width="30" height="30">
      </a>
    </li>
  </ul>
</div>

<div class="content">

  <div class="column-one">
    <div class="circular--portrait">
      <img src="images/profile.jpg">
    </div>

    <p>Eddie Munoz has been creating art from the age of 13. While he was completing his Bachelors of Applied Science in Human Relations he was freelancing on the side. Eddie has created numerous character artists.</p>
  </div>



  <div class="column-two">
    <h1>What others are saying</h1>
    <p>"Eddie is the best young talent I have had the pleasure to work with. He has a great eye for detail and really finds the fun in whatever project he is given no matter the size. Eddie strives to learn every nuance of 3D gaming tech as well as distributing
      that knowledge once learned. Eddie is an amazing talent that is bound for superstar status." - Billy Ashlswede, Art Lead at Riot Games</p>
    <p>"Eddie was a highly valued Character Artist with proficiency in many different modeling programs. He was a very dedicated artist who frequently helped others and went out of his way to produce additional assets for our game. Eddie has not only a very
      technical, but also a very artistic mindset. All of these qualities make Eddie a great asset to any team." -Kyle Sarvas, Game Artist/Game Designer</p>
  </div>
</div>